Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Posted by 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

rhupp
rhupp
11,019 Points

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