Engrain by ByteRush

WEB.09.01 Mid-level· 10 minCore — asked often

Formatting contexts and margin collapsing: the rules behind odd gaps

Block and inline formatting contexts, what creates a block formatting context (flow-root, overflow, flex and grid), exactly how vertical margins collapse, and how floats are contained.

Comes up in: Web fundamentals

Learn#

Ishaan gives a card’s heading margin-top: 24px. The space appears above the card, not inside it, and the card’s background starts right at the heading. He did not make a mistake; CSS did what its rules say.

Margin collapsing joins vertical margins that touch, with no padding, border or content between them, into one margin. Two siblings with 24px and 16px get a 24px gap, not 40px. A parent’s top margin and its first child’s top margin can also collapse, which is Ishaan’s bug.

A formatting context is a region with its own layout rules. In a block formatting context, boxes stack vertically; in an inline formatting context, text and inline boxes flow in lines.

A new block formatting context (BFC) is a fresh, self-contained layout region. Margins do not collapse across its edge, and it contains its floats. The cleanest way to create one is display: flow-root.

A heading's margin escapes its card, then stays insideStep 1 of 4

Page

  • .card (margin-top: 0)
  • h2 (margin-top: 24px)

State

    empty

    The card has no padding or border on top. Its first child, the heading, has margin-top: 24px.

    Read the steps as text
    1. The card has no padding or border on top. Its first child, the heading, has margin-top: 24px.
    2. Nothing separates the two top margins, so they collapse into one: the heading's margin appears outside the card.
    3. Add display: flow-root to the card. It now starts a new block formatting context.
    4. Margins never collapse across a formatting context boundary. The 24px stays inside the card.

    Predict#

    Predict first

    Two flex items stacked in a column have margin-bottom: 20px and margin-top: 30px. What is the gap?

    Interview angle#

    Say it like this — about 30 seconds

    “A block formatting context is a layout region where blocks stack vertically and which is isolated from outside: margins do not collapse across its edge, and it contains its floats. You create one with display flow-root, which exists only for this, or with overflow other than visible, display inline-block, flex or grid items, floats and absolute positioning. Margin collapsing joins touching vertical margins in block layout: the larger positive one wins. It never happens in flex or grid.”

    Stays on your device. Nothing is uploaded.
    Follow-up What is a block formatting context and how do you create one?
    An isolated block layout region; create it with display: flow-root, overflow: hidden or auto, floats, absolute positioning, inline-block, or as a flex or grid container.
    Follow-up Explain margin collapsing.
    Adjoining vertical margins in block layout merge: the result is the largest positive, the most negative, or their sum if mixed.
    Follow-up How do you stop a child's margin escaping its parent?
    Give the parent padding or a border, or make it a BFC with display: flow-root, or use flex or grid.

    Practice#

    Guided

    Encode the collapsing rule and the BFC rule as functions.

    Done when

    • collapse handles all-positive, all-negative and mixed margins, and an empty list.
    • createsBFC returns true for every trigger listed, and false for plain block elements.

    The automatic tests for this exercise are still being written. Try it in your own editor, against the checklist above.

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    Two adjacent sibling margins are 24px and 16px. What is the gap?

    24px: the larger positive margin.

    What is the cleanest way to create a block formatting context?

    display: flow-root

    Do flex or grid items collapse margins?

    No. Collapsing happens only in block layout.

    Collapse of 30px and -10px?

    20px: largest positive plus most negative.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round

    Margins collapse only when nothing separates them: no padding, border, inline content or clearance. Horizontal margins never collapse.

    Check yourself: What stops a parent and child's top margins from collapsing?

    Padding, a border, or content between them, or the parent being a BFC.

    How it works underneathSenior rounds

    Mixed signs add the largest positive and the most negative. An empty element with no height, padding or border lets its own top and bottom margins collapse together, and with its neighbours’ .

    Check yourself: Can an empty block's own top and bottom margins collapse?

    Yes, if it has no height, padding or border, they collapse through it.

    Edge cases and trapsWhere people slip
    A float leaves normal flow, so a parent with only floated children has zero height. A BFC contains floats; the old clearfix hack added a cleared pseudo-element instead. Use flex or grid for layout today; keep floats for wrapping text around images.
    Check yourself: Why does a container with only floated children have zero height?

    Floats are out of flow; only a BFC (or clearfix) contains them.

    In productionStaff-level answers

    Many teams use one direction of margin, or gap in flex and grid, so collapsing never surprises them . The flow-root value exists only to create a BFC with no side effects.

    Check yourself: Why do many design systems use only margin-bottom (or gap)?

    One-direction margins and gap avoid collapsing surprises.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • What is a block formatting context and how do you create one?
    • Explain margin collapsing.