Collapsing margin
The expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. The resulting margin width is the maximum of the adjoining margin widths. In CSS 2.1, horizontal margins never collapse.
The vertical margins of the paragraphs in the colored boxes stick out of their parent container (the DIVs). The background color of the paragraphs hides the background of the DIVs. The space above the first paragraph and below the last one is the same as the space in between the paragraphs. Which means these margins do not add up (the gap between the boxes is not the addition of the bottom margin of one paragraph with the top margin of another).
Margins on these paragraphs come from one of the browser’s default styles sheets. Margin values may vary across browsers.
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child’s top margin if the element has no top border, no top padding (this is why headings often create a gap above their containing block).
Margins of the root element’s box do not collapse.
Style all three boxes with:
line-height: 0;