1) Adjoining boxes of sibling elements:
<div>
<div></div>
<div></div>
</div>
2 child boxes inside a parent box, all 3 boxes have 20px margins, parent has 1px border to avoid ancestor collapsing
2 child boxes have their top and bottom margins collapsed. Therefore the middle margin is 20px and not 40px. Most of the time this is what we want.
2 child boxes inside a parent box, all have 20px margins, parent has 1px padding to avoid ancestor collapsing
2 child boxes are this time floated left and cleared. Additionally clearing divs are added for Internet Explorer support. This method gives us 40px in the middle by disabling margin collapsing of the two siblings.
2 child boxes inside a parent box, all have 20px margins, parent has 1px padding to avoid ancestor collapsing
This time we give the 1st child box a display of inline-block which is supposed to make its margins not collapse. While this inline-block behavior works like a charm in compliant browsers, unfortunately it does not work in IE7.
2 child boxed inside a parent box, all have 20px margins, parent has 1px padding to avoid ancestor collapsing
Finally this we use a display of inline-table on the first child box. This behavior works in IE7 and FF2 and above. You may also try overloading both properties on the element as a fail safe like: display:inline-block;display:inline-table;
2) Adjoining boxes of ancestor elements:
<div>
<div></div>
</div>
2nested boxes, both have 20px margins, parent div has
no border or padding. Note how the margins of both boxes collapse. The parent box takes over the margin of the child.
You might be wondering, so why does the margin stick out of the outer div instead of being applied to inner div? Remember that the height of containers are calculated based on the the height if their children, and a block level element's height is measured from its top border edge to its bottom border edge. So the outer div only honors the content height of its children when calculating its own height, and since margins are already collapsed, the inner margins will appear to protrude out of the parent.
2 nested boxes, both have 20px margins, parent has a 1px border
2 nested boxes, both have 20px margins, parent has a 1px transparent border for an invisible solution.
2 nested boxes, both have 20px margins, parent has 1px padding again for making it less visible in our UI.
nested boxes, both have 20px margins, parent div has its overflow hidden. Great: Now we don't have to add 2 extra pixels to our layout, but note that this method only works with ancestors.
nested boxes, both have 20px margins, parent div is floated left. Works great if you are capable of using floats in your current flow.
3) Self collapsing boxes:
An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining.
When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of subsequent siblings but that resulting margin does not collapse with the bottom margin of the parent block.
<div>
<div></div>
<div></div>
<div></div>
</div>
3 child boxes inside a parent box, all have 20px margins, parent has 1px borders to avoid ancestor collapsing
there are 3 child boxes inside, but the middle child box collapses on itself, and then the surrounding 2 boxes collapse on its margins again, so the end result is that our empty box is not visible and basically does not affect the flow at all. This method of empty block level elements often used for DOM manipulations and Ajax data storage, is effective since it doesn't affect the layout.
back to
Understanding & Taming Collapsing Margins in CSS