CSS not applying to footer
element

Question

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>

@Sigurd Mazanti answeres your question, but also if you set a non-block display method, you should also see the results you expect. E.g. `footer { display: flex; }` — Alicia Sykes, May 21 '22 at 11:08

score 2 · Accepted Answer · answered May 21 '22 at 11:03

The margin is applied - your problem is just that you have declared a 10px border without declaring a border-style, so essentially it looks like the p-element's margin is overflowing, because there is an invisible border of 10px. Apply a border-style and you will see the margin:

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;
  display: block;
  border: black solid 10px;
  box-sizing: border-box;
}

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>

Thanks, missed this when I was looking it over. – John Jacob May 21 '22 at 11:13 — John Jacob, May 21 '22 at 11:13

score 1 · Answer 2 · answered May 21 '22 at 11:13

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.

score 0 · Answer 3 · answered May 21 '22 at 11:08

0

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%;

answered May 21 '22 at 11:08

Saurav

36
5

score 0 · Answer 4 · answered May 21 '22 at 11:13

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>

CSS not applying to footer element

4 Answers4

CSS not applying to footer
element