Suggest an editImprove this articleRefine the answer for “What is "collapsing margins"?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Collapsing margins** is the effect of vertical `margin` values collapsing together on block-level elements, where the largest value is taken instead of the sum (for example, 30px and 20px result in 30px total, not 50px). **Key point:** margins do not collapse if the element has a `border`, `padding`, a set `overflow`, or is a flex or grid container.Shown above the full answer for quick recall.Answer (EN)Image**Collapsing margins** is the effect of vertical `margin` values on blocks collapsing together, where instead of adding up, **the largest value** is taken, and the resulting spacing becomes shared. It happens only with **vertical** spacing (`margin-top` and `margin-bottom`) and only for **block-level** elements. --- ### **When margins collapse** 1. **Between two adjacent block elements** ```css div + div { /* margin-bottom of the first and margin-top of the second will collapse */ } ``` 2. **Between a parent and its first/last child element** (if the parent has no `border`, `padding`, or `overflow`) 3. **In an empty block** (if it has no content, padding, or border) --- ### **How the result is calculated** If there are two spacings: ```javascript margin-bottom: 30px margin-top: 20px ``` The result will be **30px**, not 50px. --- ### **When margins do NOT collapse** - if there is a `border` - if there is `padding` - if `overflow: hidden | auto | scroll` is set - if the element is flex or grid --- ### **The gist in one sentence** **Collapsing margins is the mechanism by which the vertical margins of two blocks merge into one, equal to the larger of the two.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.