Margin-collapse is sneaky
.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