# 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.

```css
h2 { margin-bottom: 20px; }
p  { margin-top: 12px; }
/* the gap between them is 20px, not 32px */
```

Level: Apprentice · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/apprentice)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/margin-collapsing