Collapsing margins
Vertical margins on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins. This does not happen on horizontal margins (left and right), only vertical (top and bottom).
To illustrate, take the following HTML:
<h2>Collapsing Margins</h2>
<p>Example text.</p>
And the following CSS:
h2 {
margin: 0 0 20px 0;
}
p {
margin: 10px 0 0 0;
}
In this example, the h2 element is given a bottom margin of 20px. The paragraph element, which immediately follows it in the source, has a top margin set at 10px.
Common sense would seem to suggest that the vertical margin thickness between the h2 and the paragraph would be a total of 30px (20px + 10px). But due to margin collapse, the actual thickness ends up being 20px.