Detailed explanation
Margin collapsing is a CSS behaviour where adjoining vertical margins of block-level boxes in normal block flow combine into one margin instead of being added together. For example, if one div has margin-bottom: 20px and the following div has margin-top: 30px, their gap is normally 30px, not 50px. This matters when debugging unexpected spacing: a margin can affect the space outside a container rather than create the internal gap you expected.
There are three main cases: adjacent siblings, a parent and its first or last in-flow child, and an empty block whose own top and bottom margins collapse. Parent–child collapsing requires specific conditions. A parent's top margin can collapse with its first child's top margin when no top border, top padding, inline content, or clearance separates them, and the parent does not establish a new block formatting context. Bottom-margin collapsing has additional constraints, including the parent's height being auto and min-height being zero. An empty block's margins can collapse through it when no border, padding, line box, height, or minimum-height constraint keeps them apart.
Under the hood, the browser resolves a set of adjoining margins into a single used margin. With only positive values, it takes the largest value. With mixed signs, it adds the largest positive value to the most negative value: 30px and -10px produce 20px. If all margins are negative, the most negative value wins. Multiple adjoining margins can participate in the same collapsed set; this is not simply a pairwise spacing rule.
Collapsing does not apply to horizontal margins, and margins between flex or grid items do not collapse. A parent with display: flow-root prevents its margins from collapsing with its children's margins, but its own margins can still collapse with outside siblings. Interviewers look for these boundaries and the negative-margin rules, not just the phrase 'the larger margin wins'. Choose padding for internal spacing or flex/grid gap for deliberate spacing between items when those layouts fit the design.
Key points to remember
- Adjoining vertical margins in normal block flow can collapse; horizontal margins do not.
- Collapsing occurs between siblings, between eligible parents and children, and through eligible empty blocks.
- Positive margins use the largest value; mixed signs combine the largest positive and most negative values.
- Borders, padding, content, sizing constraints, and formatting contexts determine whether margins are adjoining.
- Flex/grid item margins do not collapse; display: flow-root prevents parent–child margin collapsing.
Common mistakes candidates make
- Saying the larger margin always wins without accounting for negative margins.
- Assuming a child's top margin always creates space inside its parent.
- Claiming display: flow-root prevents every kind of margin collapsing, including the container's margins with outside siblings.
Likely follow-up questions
How can you prevent a child's top margin from collapsing with its parent?
Use display: flow-root on the parent to establish a new block formatting context. Top padding or a top border also separates the margins; choose these when the design actually requires internal spacing or a border.
What happens when both margins are negative?
The most negative margin wins: -20px and -30px collapse to -30px, not -50px. Negative spacing can bring boxes closer together and may cause overlap.
Does overflow: hidden prevent margin collapsing?
On a normal block container, overflow: hidden establishes a block formatting context and prevents parent–child margin collapsing. However, it can clip content, so display: flow-root is usually clearer when creating that formatting context is your only goal.
Interview tip: Start with the 20px-and-30px sibling example, then explain parent–child collapsing and negative margins before naming a suitable prevention technique.