.parent { margin: 10px; background-color: #8bf; }
.child { margin: 10px; background-color: #fe8; }
.sibling { margin: 10px; background-color: #8f8; border: 3px solid #484; }
Block-axis (here, vertical) margins will collapse. Inline-axis margins do not.
default: block-axis margin collapse
A border or padding on the parent comes between the parent and child margins and prevents collapse. Block formatting context (here, due to overflow: hidden) also disables margin collapse.
parent border: no collapse
parent padding: no collapse
parent overflow: no collapse
Borders and padding on thge child do not lie between child and parent margins, so do not prevent collapse.
child border: collapse
child padding: collapse
child overflow: collapse
Margins between adjacent block siblings collapse. Borders do not come between and thus have no effect.
Sibling
Sibling
Sibling
Inline margins do not collapse between inline siblings. Inline elements do not have block-axis margins.
Inline sibling
Inline sibling
Inline sibling
Inline sibling
Inline
Inline
Inline