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
Go to www.seifi.org for a clear article on collapsing margins. This article has a few great graphics
I used these websites as sources for this article: