The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
Margin collapsing occurs in three basic cases:
margin-top
of a block from the margin-top
of one or more of its descendant blocks; or no border, padding, inline content, height
, min-height
, or max-height
to separate the margin-bottom
of a block from the margin-bottom
of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.height
, or min-height
to separate a block's margin-top
from its margin-bottom
, then its top and bottom margins collapse.Some things to note:
<p>The bottom margin of this paragraph is collapsed …</p> <p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> <div>This parent element contains two paragraphs! <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p> <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>I am <code>2rem</code> below the element above.</p>
div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; }
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1) The definition of 'margin collapsing' in that specification. | Recommendation | Initial definition. |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing