Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mastering CSS Margin Collapsing

Mastering margin collapsing

掌握边距重叠

Top and bottom margins of blocks are sometimes collapsed into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

Margin collapsing occurs in three basic cases:

  • Adjacent siblings
  • Parent and first/last child If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, 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 its last child, then those margins collapse. The collapsed margin ends up outside the parent.
  • Empty blocks If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

Margins of floating and absolutely positioned elements never collapse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.