Margin collapsing
Vertical margins between blocks merge into the larger one.
What is margin collapsing?
Margin collapsing is when the top and bottom margins of two blocks next to each other merge into one, using the larger of the two instead of adding them.
h2 { margin-bottom: 20px; }
p { margin-top: 12px; }
/* the gap between them is 20px, not 32px */
Level: Apprentice · More CSS terms at this level
Updated