Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

What is margin collapsing?

Short interview answer

When two adjacent block-level elements' vertical margins meet — such as the bottom margin of one and the top margin of the next — they can combine into a single margin equal to the larger of the two, rather than adding together.

Example

CSS
.a { margin-bottom: 30px; }.b { margin-top: 20px; }/* gap between .a and .b is 30px, not 50px */

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to The CSS box model

Related questions