CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

Kirt Perez
Kirt Perez
4,778 Points

I still don't understand what's being said here

Help

Reggie Williams
seal-mask
.a{fill-rule:evenodd;}techdegree
Reggie Williams
Treehouse Teacher

When 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
Kirt Perez
4,778 Points

Reggie 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.

Reggie Williams
seal-mask
.a{fill-rule:evenodd;}techdegree
Reggie Williams
Treehouse Teacher

Kirt 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.