Box model: margins collapse and how to avoid it

The margins collapse is part of the specifications for the box model and the use of vertical margins . Often this ‘phenomenon’ is ignored, because of the use of other properties which prevent the collapse, but every so often, it can create a puzzling result that could be considered as an error of interpretation.

The margins collapse happens when adjacent vertical margins (margin-top and margin-bottom), with no separation between them, of 2 or more block elements (adjacent or nested) combine to form a single margin.

Important: the margins collapse never happens with inline elements or horizontal margins (margin-left and margin-right).

For margins with positive values, after the margins collapse, the margin will be equal to the largest value applied.

A typical example of margins collapse in between 2 block elements is with the paragraph.

Let’s take the example of 2 paragraphs to which we apply 20px vertical margins (margin:20px 0;).
The result is that the paragraphs are separated by a margin of 20px due to the margins collapse and not by one of 40px (ie not the sum of the bottom margin of the first paragraph plus the top margin of the second one).

Using 3 paragraphs, we can see the behavior of the margins collapse using different positive values for more adjacent block elements.

In this case, we apply vertical margins of 80px to the first paragraph, 20px to the second and 50px to the third one. The result is a margin of 80px in between the first 2 paragraphs and a margin of 50px in between the 2 last one. Larger values take precedence.

In the case of margins with negative values, after the margins collapse, the value results to be the difference in between the largest positive value less the largest negative value.

Example, 2 adjacent paragraphs, the first one with vertical margins of -30px and the second one with vertical margins of 50px, will result, after the margins collapse, to a margin of 20px (ie 50 less 30).

In the case of only negative values, the largest negative value will be applied.

The margins collapse is not only in between adjacent block elements but also in between nested block elements.

A typical example which could lead to error in the creation of a page, would be a main div, parent of a second div to which we apply a top margin (margin-top).
The result will be that the main parent div will move of tot pixel while its child element will stay attach to the top border.

Example: a div to which we reset its margings to 0, which contains a div with margin-top 50px, will result to the main div with a top margin of 50px while the nested div to which we applied the margin will not move from its original position.

In fact, in the case of nested elements, the only margin after the margins collapse will be applied to the outermost element of all.

Example: a main parent div with margin:0, which contains a nested child div with margin-top 20px, which contains itself another child div with a top margin 30px.
The margins collapse will result that the largest value (30px) will be applied to the outtermost main parent div.

The solution to avoid the margins collapse

The best solutions are included in the CSS2 specification about the margins collapse, which say that the collapse does not happen to elements:

• with a border
• with a padding space

Rightly, border and padding create a space in between the elements and avoid the collapse.

With the fact that the margins collapse happens with block elements in their natural flow, the collapse will also not happen for elements:

• floated or cleared
• with an absolute position

Finally, the margins collapse does not happen for elements to which is applied the overflow css properties with a different value of the default one: ‘visible’.