FrontendHaltCSS·Intermediate·Coding·1 min read
What causes margin collapsing?
Short interview answer
Adjacent vertical margins of block boxes in the same block formatting context can combine rather than add. Flex and grid item margins do not collapse. Using gap for component spacing avoids relying on collapse behavior.
Example
p { margin: 16px 0; }/* two stacked <p> are separated by 16px, not 32px — the margins collapse */
.stack { display: flex; flex-direction: column; gap: 16px; }/* gap does not collapse — always exactly 16px */Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.