Explain the CSS box model: content-box vs border-box

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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?

ONE 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.

Source: developer.mozilla.org