Margin Collapsing

## The rule in one line When two block-level margins meet in normal flow with nothing between them they do not stack — they merge into one margin whose size is the larger of the two. This is **margin collapsing**, and the adjoining-siblings case is the one everybody meets first. ## Why the answer is 30px ```css .a { margin-bottom: 30px; } .b { margin-top: 20px; } ``` Given `<div class="a">` immediately followed by `<div class="b">`, the bottom margin of `.a` and the top margin of `.b` are *adjoining*: between the bottom border edge of `.a` and the top border edge of `.b` there is no border, no padding, no line box of text and no clearance. Adjoining margins collapse, and the used value is the larger one — 30px. The smaller margin is not "lost" in any mysterious way; both boxes simply share one 30px separation. A useful mental check: change the 20px to 5px and the gap stays 30px; change the 30px to 10px and the gap becomes 20px. The gap tracks the maximum, which is exactly what "collapse to the larger" means. ## Only the block axis Collapsing applies to margins along the **block axis** — vertical in the default horizontal writing mode. Inline-axis margins (left and right in that mode) never collapse: two boxes sitting side by side with `margin-right: 30px` and `margin-left: 20px` are separated by the full 50px. That asymmetry is the single most-tested fact here, because candidates who learned the rule as "margins collapse" over-apply it. ## What does not prevent it Padding or a border on the elements *themselves* does not stop sibling collapsing. `.a`'s `padding-bottom` sits inside `.a`, before its margin; the two margins still touch each other. What separates adjoining margins is something *between* them — an intervening element that has a border, padding, or content, or clearance introduced by `clear`. Likewise, giving `.a` `overflow: hidden` changes nothing about the sibling gap. Establishing a new block formatting context stops a box from collapsing with its **in-flow children**; it says nothing about its siblings. ## What does prevent it - **Flex and grid items.** Margins of flex items and grid items never collapse — with each other or with the container. Wrapping the two divs in a `display: flex; flex-direction: column` parent yields the full 50px. - **Floats.** A floated box's margins do not collapse with anything. - **Absolutely positioned boxes.** Same: `position: absolute` or `fixed` takes the box out of flow and out of collapsing. - **Inline-level boxes.** An `inline-block` box's vertical margins do not collapse with adjoining block margins. - **The root element.** The margins of the root element's box never collapse. ## Why the rule exists It makes default typographic flow look right. The user-agent stylesheet gives paragraphs a top and a bottom margin of about `1em`; without collapsing, consecutive paragraphs would be separated by two of them while the first paragraph in a section got only one. Collapsing normalises that to a single rhythm. Modern layouts increasingly sidestep the whole question by using flex or grid with `gap`, or by declaring spacing in one direction only, but collapsing is still the behaviour of plain block flow and it is still what the browser does to your markup by default. ## Corner cases worth knowing A margin of `0` still participates — it just always loses to a positive one. More than two margins can collapse at once when boxes nest. And negative values do not follow "the largest wins": the result is the largest positive plus the most negative, so `30px` meeting `-10px` yields `20px`.