Collapsing Block Margins

This example uses paragraphs (p) for simplicity, but these concepts apply to any block elements.
This example uses em units (p) for simplicity, but these concepts apply to any block elements. All the paragraphs in this example have 1em margins on all sides, but these concpepts apply to other units such as px and %.

Collapsing Margins - When blocks are consecutive (one immediately following another) in the page layout flow, the margins "collapse." Rather than adding the two margins between the blocks, the browser will apply only the largest of the two margins. The official terminology is "collapse," but "applying 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 didn't collapse

This doesn't come up that often, but it is worth noting that 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.5em top margin.

Margins are not collapsed when the blocks are side-by-side such as with floated blocks or elements told to display as inline-blocks.

Since the blocks are side-by-side, the margins are NOT collapsed, so there is 2em of space between them.

I am a floated Paragraph with 1em side margins.

Collapsing Margins also apply to a parent/child relationship but that gets a bit strange.
First, consider the two div blocks below. As you would expect, the two 1px margins collapse to the 1px space between the blocks that you can barely see.

I am a default div block with 1px margins.

Now consider the same div blocks below, but each now has a paragraph child block. The top/bottom margins of the p blocks are "spilling outside" of their parent div blocks. The result is that the p 1em margins are being applied outside of the parent divs. When a child margin spills outside its parent, the larger of the two margins is used, hence the term collapsing. However, the term "spill outside" seems more indicative of what's going on here than the term collapse.

You can see below that the 1em p side margins are being applied within the parents, but the 1em top/bottom margins are spilling outside the parents, then getting collapsed down to 1em.

I am paragraph with 1em margins inside a div block with 1px margins.

There are several ways to force a child's margins to be contained within the parent. Basically, you have to keep the child's margins from spilling out of the parent by "forcing the child into the interior" of the parent. An obvious way is to place some content in the parent block before the child (even an   will do). But you can also applying padding or border to the parent, thereby forcing the child "into it's interior." The parent blocks below use padding to keep the child margins from spilling outside.

I am paragraph with 1em margins inside a div block with 1px padding-bottom.

I am paragraph with 1em margins inside a div block with 1px padding-top.