Collapsing Margins

Part of the CSS Box Model is the concept of collapsing margins. Where the box model concept might be a bit hard to grasp, collapsing margins are even more difficult. The W3C specs define collapsing margins like this:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

This means that when vertical margins (as of CSS 2.1 only vertical margins collapse) touch eachother the smalles value will expire. If a few paragraph elements with 20 pixels top and bottom margin are stacked - which happens quite a lot - the space between these paragraphs isn't 40 pixels, as you would expect, but 20 pixels instead.

There are other situations where elements do not have their margins collapsed:

• floated elements
  
• absolutely positioned elements
  
• inline-block elements
  
• elements with overflow set to anything other than visible (They do not collapse margins with their children.)
  
• cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
  
• the root element
  

Indepth article

Go to www.seifi.org for a clear article on collapsing margins. This article has a few great graphics

References

I used these websites as sources for this article:
http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://reference.sitepoint.com/css/collapsingmargins