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`?
answer
- which box does width describe
- padding and border sit outside
- 100 + 40 + 4
- border-box eats the padding inward
- margin is outside either way
basics
~20 sUnder the default box-sizing: content-box, width sizes only the content box, so 100px width plus 20px padding on each side plus 2px borders renders 144px wide. With box-sizing: border-box the box stays 100px and the content area shrinks to 56px.
solid answer
~40 sEvery element is four nested boxes: content, padding, border, margin. The initial value of `box-sizing` is `content-box`, which means `width` and `height` set the **content** box only, and padding and border are added outside it. So `width: 100px` with `padding: 20px` and `border: 2px` paints 100 + 40 + 4 = **144px** of visible box. Switching to `box-sizing: border-box` makes `width` describe the border box instead: the element paints exactly **100px**, and the content area is squeezed to 100 − 40 − 4 = **56px**. Margin is outside both models and is never included in `width` either way. Border-box is what most people expect intuitively, which is why nearly every codebase applies it globally — it makes `width: 100%` on a padded element stop overflowing its parent.
code
css · 15 lines.content-box-demo {
box-sizing: content-box; /* initial value */
width: 100px;
padding: 20px;
border: 2px solid #333;
/* painted width: 100 + 40 + 4 = 144px */
}
.border-box-demo {
box-sizing: border-box;
width: 100px;
padding: 20px;
border: 2px solid #333;
/* painted width: 100px; content box: 56px */
}go deeper
Be ready to do the arithmetic out loud: 100px width, 20px padding each side, 2px borders gives 144px painted, and border-box makes it 100px with a 56px content area. Say plainly that margin is never part of width.
Explain that box-sizing chooses which box width, height, and the min/max pair describe, and that background paints under padding and border. Mention that the content box floors at zero when padding exceeds the declared width.
Show you know why the global border-box reset exists: percentage widths plus padding overflow under content-box, and the reset carries zero specificity so components can still opt out per element.
Own the tradeoff of a project-wide sizing convention: a global reset is a cross-cutting contract that third-party widgets authored for content-box may violate, so decide up front whether it ships unscoped or inside a cascade layer components can escape.
## 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.
- Does `box-sizing: border-box` also affect `min-width` and `max-width`?Yes. `box-sizing` governs which box every one of `width`, `height`, `min-width`, `max-width`, `min-height`, and `max-height` measures. Under `border-box`, a `max-width: 320px` caps the border box, so padding and border are counted inside that cap rather than pushing the element past it — a common surprise when a capped element with heavy padding looks narrower than expected.
- With `border-box`, what happens if padding and border together exceed the declared width?The used content width is floored at zero instead of going negative, and the border box grows past the declared value. `width: 100px` with `padding: 60px` gives a 0px content box inside a 120px painted box. So `border-box` guarantees the width only while padding plus border fits inside it.
- Does `box-sizing` have any effect on `outline` or `box-shadow`?No. Neither participates in the box model or in layout at all — they paint outside the border box without reserving space, so no `box-sizing` value includes them. That is why an `outline` on a focused element never shifts the layout, while adding a `border` on focus does.
Think of shipping a mug: the mug is the content box, the bubble wrap is padding, the cardboard is the border, and the gap you leave between parcels on a shelf is margin. content-box measures the mug; border-box measures the finished parcel.
saying these in an interview costs you the question
- Says padding is included in width by default
- Claims border-box also absorbs margin
- Thinks border-box shrinks the content instead of the content box
- Answers 140px by forgetting the two borders
- Believes box-sizing is inherited from the parent