When margins of adjacent inner and outer element collapse

Question

Hello

I’ve read that if one element is nested inside another and they both have margins, then they could collapse ( assuming their vertical margins are touching ).

a) Under what conditions would their vertical margins be touching? Perhaps only when a parent element has a fixed height, while inside elements take more vertical space than parent element has at its disposal ( I did a little experimenting but I don’t think I've managed to cause the vertical margins of adjacent inner and outer element to collapse )?

b) Anyways, I don’t quite understand why it’s a good idea ( from designer’s point of view ) to make margins of an inner and outer element collapse?

c) Assuming an inner element has a margin of 100px and an outer element a margin of 20px, when the two margins collapse then both elements will have a margin of 100px?

In any case, I'm still having a hard time visualizing this. Namely, normally the margins touching are bottom margin and top margin, but here both margins are either bottom margin or top margin

thanx

EDIT:

1) Since in the following example ( taken from the link you’ve provided ) the margins of div and h1 collapse, I would expect that the highest part of letters in h1 element would be touching the top edge of div element (ie the top side of orange rectangle), but instead there is a bit of space ( few millimeters ) between the letters and the top side of a rectangle. Why is that?

#masthead {background: #F80; margin: 10px;}
#masthead h1 {margin: 20px 10px;}
#masthead p {margin: 5px 10px; font-style: italic;}


<div id="masthead">
<h1>ConHugeCo</h1>
<p>Making the world safe for super sizes</p>
</div>

2) Why does applying padding cause the margins ( of parent div and child h1 ) not to collapse? Because now margin of h1 doesn’t start at the same place ( that place being the top side of orange rectangle ) as a margin of parent div?!

thanx

Answer 1

Eric Meyer knows a crap load about CSS.

Check out this article he wrote about collapsing margins, why they happen, and how to stop them when you need to.

Edit: Updated after your update.

1) I'm guessing the letters from the h1 don't touch the div because of line height. A line of text has some space above it based on line height that has nothing to do with margin or padding. Try adjusting that if you want them completely flush.

2)I don't know the exact reasoning behind why margins don't collapse when padding is also involved. I'm going to assume it has something to do with box model specifications...