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
Kirt Perez
7,374 PointsI still don't understand what's being said here
Help
Reggie Williams
Treehouse TeacherKirt Perez great work coming back to it and excellent explanation. However I wouldn't say the margin from the h1 isn't being used to separate the body and header container but the top of the body and the to top of the h1 element itself.
1 Answer
Reggie Williams
Treehouse TeacherWhen two vertical margins are touching they will collapse into each other. When this happens, the margin between them will be equal to whichever of the two that was the largest. It can be tricky but if you haven't already, try the code in the workspace so you can see the behavior in your own browser Kirt Perez
Kirt Perez
7,374 PointsKirt Perez
7,374 PointsReggie Williams Thanks for the response, I watched the video again with a fresh mind and was able to come up with this summary. Let me know if this summary shows that I understand what is said in the video!
So from what I have gathered:
Margins collapse with other containers when there is no padding or border to separate containers. In this case, the h1 element is not separated from the body container despite being in its own header container. So therefore the two containers margins MERGE to whichever has the biggest value, the h1 elements margin value. The margins specified in the h1 element isn't used inside of its container, it is instead used to separate the body and header container.
Normalize.css has a h1 margin of 0.67em and if I wanted to get rid of the gap on the top of the page, I must override the margin-top value to 0 for the h1 element.
I can also get rid of the collapsing by using padding. Now the h1 elements margins will take effect INSIDE of its container.