A div in normal flow has no padding or border, and its first child has margin-top: 40px. The 40px of space appears above the parent rather than inside it. Why does CSS do that, and where does the parent's box actually start?

## The symptom You add `margin-top` to a heading inside a card, and instead of pushing the heading down inside the card, the whole card moves down and the heading sits flush against its top edge. Give the card a background colour and the gap is clearly outside it. Nothing in your stylesheet declares a margin on the card, yet the card has one. ## The mechanism CSS treats a parent's top margin and its first in-flow child's top margin as **adjoining** when nothing lies between the parent's top border edge and the child's top border edge. "Nothing" is a precise list: - no `border-top` on the parent, - no `padding-top` on the parent, - no inline content (a line box) before the child, - no clearance on the child, - and the parent does not establish a new block formatting context. When all of that holds, the two margins collapse into one margin, and — this is the part that surprises people — the resulting margin belongs to the *outside* of the parent. The parent's border box therefore begins exactly where the child's border box begins. ```css .card { background: #eef; } /* no padding, no border */ .card > h2 { margin-top: 40px; } ``` The used result is a 40px margin above `.card`, and zero space between `.card`'s top edge and the heading. ## The same rule at the bottom A parent's bottom margin collapses with its last in-flow child's bottom margin under the mirrored conditions: no `padding-bottom`, no `border-bottom`, no content after the child, and the parent's height must be `auto` (with `min-height` of zero). A fixed `height` gives the child's bottom margin something to sit against, so the collapse does not happen. This is why the bug is often asymmetric — a card with `height: 200px` leaks its top margin but not its bottom one. ## Chains of collapse More than two margins can collapse at once. If a section contains a div which contains a heading, and none of the wrappers has padding, a border, or a preceding line box, then all three top margins are adjoining and merge into one margin outside the outermost box. This is why the escaped gap can appear several levels above where you declared it, and why hunting for the declaration in DevTools can be confusing: the element that *shows* the gap is not the element that *declared* it. ## Fixes, in order of least surprise - **`display: flow-root` on the parent.** Purpose-built: it makes the parent establish a block formatting context, which stops its margins collapsing with its in-flow children, and it adds no size, no clipping and no change to how the children lay out. - **`padding-top: 1px` or a transparent `border-top`.** Effective — they physically separate the two margins — but they change the box's metrics, and 1px of padding is a hack a reviewer will ask about. - **`overflow: hidden` (or `auto`).** Also establishes a formatting context, but it drags in real side effects: the box becomes a scroll container and can clip shadows, focus rings or dropdowns. - **`display: flex` / `display: grid` on the parent.** Margins of flex and grid items never collapse, so this fixes it, but it also changes how the children are laid out — a large change to buy one small behaviour. - **Do not** set `margin-top: 0` on the parent expecting the gap to go away. The parent's own margin was probably already zero; the gap comes from the child's margin, and zero simply loses the collapse. ## Why this design at all Block flow was designed for documents, where the collapse produces sane defaults: a section wrapper around paragraphs does not introduce doubled spacing, and the vertical rhythm of headings and paragraphs comes out even regardless of how deeply the markup nests them. In component-oriented layouts the same behaviour reads as a leak, which is why modern component CSS tends to put spacing on a `gap` in a flex or grid container, or to use one-direction margins, rather than relying on block flow's arithmetic.