A mystery gap caused by margin collapse

Two stacked boxes have a bigger gap between them than either margin alone should produce, and I can't tell where the extra space came from.

Beginner to intermediateRead 5 minDoing: 25 minutes6 steps

What you'll have at the end

A layout where the vertical spacing between elements matches the numbers you actually wrote, with no mystery extra gap

Before you start

You need

Two stacked block elements on a page whose CSS margins you can edit, and a browser you can inspect the rendered layout in.

Not covered

Negative margins and the floated or absolutely positioned elements that never collapse at all; this covers only plain stacked block boxes.

Leans on

6 steps

Fix a CSS specificity conflict without !important

for a rule that vanishes entirely instead of merging with a neighbor: that is a specificity conflict, and a different fix applies.

Checked 20 Aug 2026