Styla saysVertical margins between block elements collapse — the larger of the two wins, not their sum.
When two block elements stack, their adjacent top/bottom margins collapse into a single margin equal to the larger one — not the sum. This surprises everyone once. It only happens vertically, only between block-level boxes, and can be prevented by padding, borders, or flex/grid containers.
Power-ups you unlock
Adjacent vertical margins collapse to the larger one
Only block-level, only vertical
Padding/border between them prevents collapse
Flex and grid items do not collapse
The Specificity Sphinx attacks — common mistakes
Expecting 20px + 30px to equal 50px (it’s 30px)
Fighting collapse with !important instead of layout
Forgetting flex/grid disables it
Boss battleStack two boxes with 40px and 20px margins; confirm the gap is 40px, then put them in a flex column.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>.a{margin-bottom:40px}.b{margin-top:20px}div{background:#140a28;color:#e6e0ff;padding:8px}</style></head><body style="background:#06040d"><div class="a">40 below</div><div class="b">20 above → gap is 40</div></body></html>