CSS margin collapsing is a behavior where the top and bottom margins of adjacent block elements combine (collapse) into a single margin equal to the larger of the two. This is intentional CSS behavior, but it often causes unexpected spacing issues.
/* ❌ Problem "” child margin collapses with parent */
.parent { /* No padding or border */ }
.child { margin-top: 20px; } /* Pushes parent down, not child! */
/* ✅ Solution 1: Add padding to parent */
.parent { padding-top: 1px; }
/* ✅ Solution 2: Add border to parent */
.parent { border-top: 1px solid transparent; }
/* ✅ Solution 3: Use overflow */
.parent { overflow: hidden; }
/* ✅ Solution 4: Use flexbox (no collapse) */
.parent { display: flex; flex-direction: column; }/* Expected: 30px gap (20 + 10) */
/* Actual: 20px gap (larger wins) */
.box-1 { margin-bottom: 20px; }
.box-2 { margin-top: 10px; } /* Collapses with box-1's margin *//* ✅ Use margin on only one side */
.box-1 { margin-bottom: 20px; }
/* Remove margin-top from box-2 */
/* ✅ Or use gap in a flex/grid container */
.container {
display: flex;
flex-direction: column;
gap: 20px; /* No collapse! */
}/* ❌ Child margin pushes parent down */
.parent { background: lightblue; }
.child { margin-top: 30px; }
/* The 30px appears ABOVE the parent, not inside it! *//* ✅ Add padding to parent instead */
.parent {
background: lightblue;
padding-top: 30px; /* Use padding, not child margin */
}
.child { /* No margin-top needed */ }
/* ✅ Or add border to parent */
.parent { border-top: 1px solid transparent; }/* ✅ Flexbox prevents margin collapse entirely */
.container {
display: flex;
flex-direction: column;
gap: 16px; /* Use gap instead of margins */
}
/* Margins between flex items do NOT collapse *//* Margins DO NOT collapse when: */
/* 1. Elements are in flex or grid container */
.flex-parent { display: flex; }
/* 2. Parent has padding or border */
.parent { padding: 1px; }
/* 3. Parent has overflow other than visible */
.parent { overflow: hidden; }
/* 4. Elements are floated or absolutely positioned */
.floated { float: left; }
/* 5. Horizontal margins (left/right) never collapse */Margin collapse is when the top and bottom margins of adjacent block elements combine into a single margin equal to the larger value. It's intentional CSS behavior designed for typography spacing.
The child's top margin is collapsing with the parent's top margin. Add padding-top: 1px, border-top: 1px solid transparent, or overflow: hidden to the parent to prevent this.
No. Margin collapse only happens with vertical (top/bottom) margins. Left and right margins never collapse.
Flex and grid containers establish a new formatting context that prevents margin collapse between their children. Use gap for spacing in flex/grid layouts instead of margins.
Use gap in flex/grid containers. For block elements, apply margin to only one side (e.g., margin-bottom only). This avoids collapse issues and is more predictable.
Explore 500+ free tutorials across 20+ languages and frameworks.