In CSS, an element has `width: 100px`, `padding: 20px`, and `border: 2px solid`. How wide does it actually render under the default `box-sizing`, and what changes if you set `box-sizing: border-box`?

## The four boxes Every element in CSS generates a rectangular box built from four nested layers, from the inside out: - **content box** — where text, child boxes, or a replaced element's pixels live; - **padding box** — content plus `padding`, transparent but painted with the element's background (the initial `background-clip` is `border-box`, so backgrounds cover padding and sit under the border); - **border box** — padding box plus `border-width`; this is the element's visible edge; - **margin box** — border box plus `margin`; always transparent, and it is the space the element reserves from its neighbours rather than part of the element itself. ## What `width` actually sets The question every interviewer is really asking is: *which of those boxes does `width` describe?* The answer depends on one property, `box-sizing`, whose initial value is `content-box`. Under `content-box`, `width` and `height` set the **content** box, and padding and border are laid on top: ```css .card { width: 100px; padding: 20px; border: 2px solid; } /* content 100 + padding 20+20 + border 2+2 = 144px painted */ ``` So the rendered element is 144px wide and, if the height were also declared, 144px tall by the same arithmetic. Nothing was ignored — `width: 100px` was honoured exactly, it just described the innermost box, not the one you see. ## What `border-box` changes `box-sizing: border-box` redefines `width` and `height` to describe the **border** box. The declared length now includes padding and border, and the content box is whatever is left over: ```css .card { box-sizing: border-box; width: 100px; padding: 20px; border: 2px solid; } /* painted box = 100px; content = 100 - 40 - 4 = 56px */ ``` The same redefinition applies to `min-width`, `max-width`, `min-height`, and `max-height` — they all measure whichever box `box-sizing` names, which is easy to forget when you mix a `max-width` with generous padding. What `border-box` does **not** change: - **Margin is still outside.** An element with `width: 100%` and a positive margin still overflows its parent horizontally; `border-box` only absorbed padding and border. - **Overflow still happens.** If the content needs more room than the shrunken content box gives it, it overflows or wraps as usual; `border-box` shrinks the content area, it does not shrink the content. - **`outline` and `box-shadow` are still outside layout entirely.** Neither takes part in the box model, so neither is included in `width` under either value. ## The degenerate case With `border-box`, padding and border can exceed the declared width. The used content width is floored at zero rather than going negative, and the element then paints wider than you asked for: `width: 100px; padding: 60px` yields a 0px content box inside a 120px border box. This is the one situation where `border-box` fails to hold the promise its name suggests. ## Why teams flip it globally The practical pain of `content-box` shows up the moment percentages meet padding. A three-column row of `width: 33.333%` items, each with `padding: 0 16px`, sums to 100% *plus* 96px, so it overflows or wraps. Under `border-box` the padding is carved out of the 33.333% and the row fits. That is why the standard reset appears near the top of almost every stylesheet: ```css *, *::before, *::after { box-sizing: border-box; } ``` It is deliberately unopinionated — the universal selector contributes zero specificity, so any later rule can override it per element. ## A little history Old versions of Internet Explorer, and any page rendered in quirks mode, sized boxes the `border-box` way. The standards-mode CSS box model chose `content-box`, and the ensuing decade of frustration is exactly why `box-sizing` was added and why the community converged on switching it back. The property takes only two values today, `content-box` and `border-box`; both have been supported everywhere for many years, so using the reset needs no fallback. ## How to answer it out loud State which box `width` describes under each value, do the arithmetic (144 vs 100 with a 56px content area), and add one sentence that margin is outside both. That is the complete answer — the follow-up is usually about the global reset or about percentages.