CSS Margin Collapsing

Margins of blocks are combined (collapsed) into single margin whose size is largest of individual margins. (Blocks = block elements. Margin collapsing doesn't happen if there is a different display property, e.g. display: flex;)

Margin collapsing affects only top and bottom margins.

It does not affect margins of floating and absolutely positioned elements.

Cases when margin collapsing occurs

  1. Margins of adjacent siblings are collapsed (exception: lower sibling needs to be cleared past floats).
  2. If there is no content separating the margin-top of a parent from that of one of its decendants, collapsed margin ends up outside the parent. The same goes for margin-bottom.
  3. If there is no content in a block to separate its margin-top from its margin-bottom then the top and bottom margins collapse.

More complex margin collapsing can occur when above cases are combined.

The rules apply even to zero margin.

When negative margins are used, collapsed margin = largest positive margin + most negative margin.

When all margins are negative, collapsed margin is the most negative margin.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing