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
- Margins of adjacent siblings are collapsed (exception: lower sibling needs to be cleared past floats).
- If there is no content separating the
margin-topof a parent from that of one of its decendants, collapsed margin ends up outside the parent. The same goes formargin-bottom. - If there is no content in a block to separate its
margin-topfrom itsmargin-bottomthen 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