What they're testing
Whether you understand why layouts come out "a bit off", or just fix it by subtracting a few pixels.
The short answer~30 seconds
The default is content-box: width covers only the content area, with padding and border added outside — so width: 300px; padding: 20px; border: 1px occupies 342px. With border-box, width is the final outer width and padding/border eat inward. The latter matches how people reason about layout, which is why most projects set it document-wide.
The long answer
The difference bites hardest when mixing units: width: 50% plus padding: 16px under content-box yields an element wider than half the parent, so two side by side wrap. Under border-box they fit exactly. That's why *, *::before, *::after { box-sizing: border-box } became the first line of nearly every reset.
Worth adding: border-box doesn't include margin — margins always sit outside every calculation. And margins have their own surprising behaviour: vertical margins of adjacent elements COLLAPSE into the larger rather than summing. That doesn't happen inside flex or grid containers, which is a very practical reason modern layouts hit fewer spacing bugs.
What they'll ask next
?When flex, when grid?
Flex for one dimension — a row or a column where content drives the sizing. Grid for two — when you want to declare rows and columns up front. The short version: content-out is flex, layout-in is grid.
These lose points
- Fixing overflow by subtracting pixels by hand instead of fixing the box model.