Explain the CSS box model: content-box vs border-box
Tests if you understand how width maps to rendered size. Good answers contrast content-box (350px + 10px border = 370px) with border-box (stays 350px) and note that four width:25% items break under content-box. Red flag: saying border-box includes margin.
What's really being asked
This question checks whether you understand how declared width and height map to the final rendered size of an element. Interviewers want to see that you know the four layers of the box model and can reason about layout math, especially in responsive designs where percentages are involved.
The full answer
First, name the four layers in order from inside out: content, padding, border, and margin. Second, explain content-box, the CSS default, where width and height apply only to the content area. If you set width to 350px and add a 10px border, the element renders at 370px wide because the border is added outside the declared width. Third, explain border-box, where width and height include the content, padding, and border. The same 350px declaration with a 10px border still renders at 350px wide, which means the content area shrinks to 330px to absorb the border. Fourth, explain why border-box is preferred for predictable layouts. When you set four boxes to width 25 percent under content-box, any padding or border makes them wider than 25 percent, causing the last one to wrap to a new line. Border-box keeps them at exactly 25 percent so they stay on one line, which is essential for grid systems and component libraries.
The mistakes people make
Claiming that border-box includes margin. It does not; margin is always outside the computed box. Saying that border-box is the browser default. It is not; content-box is the spec default, though many CSS resets like the well known global border-box snippet change it for all elements. Another red flag is describing the box model only in abstract terms without using real numbers to show how the two modes differ, or confusing padding with margin.
What usually comes next
How would you apply border-box across an entire project? What happens if padding plus border exceed the declared width in border-box mode? How does the box model interact with flex or grid layouts? Can the content area become negative, and what does the spec say about that?
A concrete example
Imagine a container with four child divs set to width 25 percent, each with 10px padding and a 1px border. In content-box mode, each child is 25 percent plus 22px wide, so the last one wraps to a new line. In border-box mode, each child is exactly 25 percent wide because the padding and border are absorbed inward, so all four fit neatly in a single row.
Interview question
Four divs are set to width: 25%, 10px padding, and 1px border. Under the default box model, why does the last div wrap to a new line?
- a.The declared width applies only to content, so padding and border add extra width.Correct
- b.The margin is included in the 25% width calculation.
- c.The content area shrinks to keep the total at exactly 25%.
- d.The browser default already includes padding in the 25% width.
Why? this is the answer
Under the default content-box model, width applies only to the content area, so padding and border increase the rendered size beyond 25% and cause wrapping. Distractor D is wrong because content-box is the browser default, meaning padding is added outside the declared width rather than included in it.
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