Collapsing Block Margins

Collapsing Margins

When blocks are consecutive (one immediately following another) in the page layout flow, the margins "collapse." Instead of adding the margins between the blocks, the browser will use only the largest of the two margins. The official terminology is "collapse," but "using the larger of the two" margins is more descriptive of what it happening.

Because of collapsing margins, there is only 1em of space between the two blocks below.

I am a Paragraph with 1em bottom margin.

I am a Paragraph with 1em top margin.

At first consideration, collapsing margins seems strange. But there is a simple rationale. The W3Schools Summary Page for the P element shows that paragraphs default to 1em top/bottom margins. The em unit refers roughly to the height of M in the font being used, which is roughly the line-height within the text. It is natural to expect only 1 blank line between paragraphs. Hence collapsing consecutive paragraph margins results in the 1em space between paragraphs that you would expect, rather than 2em if the margins were added together.

Top/bottom margins only collapse when both are positive.

A negative margin is not collapsed, but is subtracted from the positive one.

There is 0.3em of space between the two blocks below (1.0em - 0.7em = 0.3em).

I am a Paragraph with 1em bottom margin.

I am a Paragraph with negative -0.7em top margin.

Margins are NOT collapsed when the blocks are side-by-side such as with floated blocks.

There is 2em of space between the blocks below since side margins do not collapse.

I am a floated Paragraph with 1em side margins.

Note: Default paragraphs do not have side margins, only 1em top/bottom. Side margins were added to the above paragraphs to show they don't colllapse.

These concepts apply to any units (px, %, em, etc.)
These concepts apply to ANY block elements. (not just p as used above)
But ONLY for blocks in the page layout flow. (not absolutely positioned blocks, for example, since margins are irrelevant for stacked blocks).