Margin Collapse

Margin collapse occurs when vertical margins of adjacent block elements combine into a single margin. The larger margin wins. This is a normal CSS behavior but can be surprising.

How Margin Collapse Works

CSS

/* Margin collapse example */
.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

/* Expected space: 20px + 30px = 50px */
/* Actual space: 30px (larger margin wins) */

/* Margin collapse rules: */
/* 1. Only vertical margins collapse (not horizontal) */
/* 2. Only adjacent block elements in normal flow */
/* 3. Only with block-level margins */
/* 4. Parent-child margins can collapse */

Preventing Margin Collapse

CSS

/* 1. Add overflow property */
.container {
  overflow: auto;
}

/* 2. Add padding */
.container {
  padding-top: 1px;
}

/* 3. Add border */
.container {
  border: 1px solid transparent;
}

/* 4. Use flexbox (modern approach) */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 5. Use grid (modern approach) */
.container {
  display: grid;
  gap: 20px;
}

Note

Margin collapse is normal CSS behavior for vertical margins between block elements. The larger margin wins. For modern layouts, use flexbox or grid with gap property instead of relying on margins.

Outline: [Outline](/css/outline).