CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

How removing the margin-bottom from the last p element is helping the layout?

I noticed that without this piece of code

p:last-child {
    margin-bottom: 0;
}

the scroll bar doesn't disappear when trying to create a sticky footer. What's the explanation? How does the margin bottom of the last paragraph affects the 100vh when all paragraphs have the same margins applied, just like the last one? Thank you.

1 Answer

It seems to be because of collapsing margins. All block elements have their own padding and margin properties applied by default, and in this case, the last <p> element's bottom margin forces space between it and the footer. The universal selector applied "box-sizing: border-box;", but that didn't automatically remove block element margins; it just shoved them into the wrapper div. I fixed the problem the way you did, by removing the bottom margin of p:last-child.

Here is an article that I hope will help (I think Guil posted in a previous video): Mastering Margin Collapsing | MDN