What is margin collapsing? Give a sibling scenario and prevention.
This tests understanding of vertical margin combination in normal flow. A strong answer defines collapsing, gives a sibling paragraph example where the larger margin wins, and names a block formatting context or padding as prevention.
What's really being asked
This question evaluates whether you understand the CSS box model in normal flow, specifically the rules that govern how vertical margins interact when no separating content or formatting context exists. It reveals if you can distinguish between layout modes and explain why margin behavior differs across contexts.
The full answer
First, define margin collapsing as the behavior where the top and bottom margins of block-level boxes combine into a single margin equal to the largest of the adjacent values. Second, describe the adjacent sibling case: when two block elements such as paragraphs follow one another, their shared margin resolves to the larger of the two rather than the sum. Third, explain prevention methods: establishing a new block formatting context, adding border or padding, inserting inline content, or switching the container to flex or grid display because margins do not collapse in those layout modes. Fourth, note that negative margins participate by adding the largest positive to the smallest negative value.
The mistakes people make
A major red flag is stating that margins always add together or that horizontal margins collapse. Another is claiming that floated or absolutely positioned elements collapse margins, when MDN explicitly states they never do. Candidates also err by suggesting margin collapse occurs in flex or grid containers, or by confusing padding and border fixes with margin fixes.
What usually comes next
An interviewer might ask how margin collapsing behaves with negative margins, or why a parent and first child margin-top seem to escape the parent boundary. They may also ask you to compare inline-block, flex, and grid containers regarding margin behavior, or to debug a layout where expected spacing is missing.
A concrete example
Imagine two adjacent paragraph elements in normal flow. The first has a margin-bottom of 2rem and the second has a margin-top of 1rem. Instead of 3rem of space between them, the browser renders 2rem because the margins collapse. To prevent this, you could establish a new block formatting context around one paragraph, or change the parent container to display flex so that the margins remain separate and the total space becomes 3rem.
Interview question
Two adjacent block-level siblings in normal flow have margin-bottom: 30px and margin-top: 20px. What is the resulting vertical space between them?
- a.50px, because adjacent vertical margins always sum together
- b.20px, because the second element's margin takes precedence
- c.10px, because the smaller margin is absorbed by the larger one
- d.30px, because the larger of the adjacent margins is usedCorrect
Why? this is the answer
Margin collapsing means adjacent vertical margins in normal flow combine into a single margin equal to the largest value, so 30px is rendered. The 50px option reflects the common misconception that margins always add together.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #box model
- #layout
- #frontend
- #design systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles