'CSS not applying to footer <p> element [duplicate]

I am having some trouble understanding why margin: 1rem is not applying to my footer element. When I modify the size, only the text content in the <p> for the article div and aside element are modified. There is no margin between the footer text and the background color on the top and bottom, only on the left and right. Could anyone tell me what's causing this? Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        background-color: pink;
      }
      section {
        background-color: lightgray;
        max-width: 1000px;
        box-sizing: border-box;
      }

      .article {
        background-color: lightyellow;
        width: 70%;
        float: left;
        margin: 0;
      }

      aside {
        background-color: lightgreen;
        float: right;
        float: none;
        overflow: hidden;
        margin: 0;
      }

      footer {
        clear: both;
        background-color: aqua;
        display: block;
        border: black 10px;
        box-sizing: border-box;
      }

      p {
        margin: 1rem;
      }
    </style>
  </head>
  <body>
    <section>
      <div class="article">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
          eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
          congue, justo orci volutpat justo, semper vestibulum mauris est mattis
          mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
          vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
        </p>
      </div>
      <aside>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
          aliquam massa. Pellentesque maximus tortor ac est ultricies, id
          sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
        </p>
      </aside>
      <footer>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
          malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
          feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
          Suspendisse sagittis eros vitae urna convallis, sit amet venenati
        </p>
      </footer>
    </section>
  </body>
</html>
htmlcsspythonjavanamed-entity-recognition


Solution 1:[1]

I believe that is margin collapse. I can see the intent to set a black border on the parent element footer in the first place. But that probably isn't working, and border: black 10px solid; would do the trick. And the margin collapse would no longer occur in this case.

Please read following page to learn about the margin collapse.

What is Margin Collapse in CSS? And How to Avoid It

And, as the other answers pointed out, perhaps it is padding, not margin, that suits your purpose.

Solution 2:[2]

You need to give padding to footer

Changes I made

In BODY tag

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

IN FOOTER

  padding: 2%;

Solution 3:[3]

You apply box-sizing then i think you like to use padding. I refactor your css a little bit.

body {
  background-color: pink;
}

section {
  background-color: lightgray;
  max-width: 1000px;
  box-sizing: border-box;
}

.article {
  background-color: lightyellow;
  width: 70%;
  float: left;
  margin: 0;
}

aside {
  background-color: lightgreen;
  float: right;
  float: none;
  overflow: hidden;
  margin: 0;
}

footer {  
  background-color: aqua;  
  box-sizing: border-box;
  padding: 10px;
}

p {
  margin: 1rem;  
}
    <section>
      <div class="article">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
          eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
          congue, justo orci volutpat justo, semper vestibulum mauris est mattis
          mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
          vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
        </p>
      </div>
      <aside>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
          aliquam massa. Pellentesque maximus tortor ac est ultricies, id
          sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
        </p>
      </aside>
      <footer>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
          malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
          feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
          Suspendisse sagittis eros vitae urna convallis, sit amet venenati
        </p>
      </footer>
    </section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Itagaki Fumihiko
Solution 2 Saurav
Solution 3 Maik Lowrey

Related Questions