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:
- Adjacent siblings: The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
- No content separating parent and descendants: If there is no border, padding, inline part, block formatting context created, or clearance to separate the
margin-topof a block from themargin-topof one or more of its descendant blocks; or no border, padding, inline content,height,min-height, ormax-heightto separate themargin-bottomof a block from themargin-bottomof one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent. - Empty blocks: If there is no border, padding, inline content,
height, ormin-heightto separate a block'smargin-topfrom itsmargin-bottom, then its top and bottom margins collapse.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing