Detailed explanation
The CSS box-sizing property controls which parts of an element’s box are included in its declared width and height. The box model consists of content, padding, border, and margin. With content-box, the initial value, width and height apply only to the content area; padding and border are added outside those dimensions. With border-box, the declared dimensions include the content, padding, and border. Margin remains outside the box and is never included by either value. Some browser styles already use border-box for particular elements, so it is useful to distinguish the initial value from browser defaults.
For example, consider .box { width: 300px; padding: 20px; border: 2px solid; }. Under content-box, the rendered border-box width is 344px: 300px of content plus 40px of horizontal padding and 4px of border. Under border-box, the border-box width stays 300px, leaving 256px for the content. The browser uses the selected sizing model when calculating the content area from the specified dimensions. The same principle applies vertically when height is specified; a height of auto still depends on content and layout rather than becoming a fixed size.
Border-box is generally preferred because it makes layout dimensions more predictable. A component declared as 300px wide can gain padding or a thicker border without increasing its outer border-box width. This is especially helpful for responsive components using width: 100%, where added padding under content-box can push the element beyond its container. It also reduces manual calculations when styling cards, navigation items, and form controls. However, it does not prevent every kind of overflow: margins, unbreakable content, and minimum-size constraints can still affect a layout.
A common reset is *, *::before, *::after { box-sizing: border-box; }. The pseudo-elements are listed explicitly because the universal selector alone does not select them. In interviews, explain the two sizing models, demonstrate the arithmetic, and state that margins are excluded. Also recognise that border-box cannot make the content area negative: if padding and borders exceed the declared size, the actual box can exceed that size.
Key points to remember
- content-box applies declared width and height to the content area only.
- border-box includes content, padding, and border within declared dimensions.
- Margins are excluded from both sizing models.
- The example is 344px wide with content-box and 300px wide with border-box.
- A universal border-box reset should explicitly include ::before and ::after.
Common mistakes candidates make
- Claiming border-box includes margins in the declared width or height.
- Saying border-box removes padding or borders instead of reducing the available content area.
- Assuming border-box guarantees that an element or its content can never overflow.
Likely follow-up questions
Is box-sizing inherited?
No, box-sizing is not inherited by default. An alternative reset sets html { box-sizing: border-box; } and *, *::before, *::after { box-sizing: inherit; }, allowing descendants to inherit a different sizing model when a component overrides it.
Why can width: 100% overflow with content-box?
In a typical block layout, the content area takes the full width of the containing block, and horizontal padding and borders are added on top. With border-box, those additions fit within the declared 100%, although margins or other layout constraints can still cause overflow.
Does border-box change how padding percentages are calculated?
No, box-sizing changes how padding fits into the declared dimensions, not how percentage padding is resolved. In ordinary horizontal writing mode, percentage padding on all four sides is calculated from the containing block’s width.
Interview tip: Start with the definition, compare 344px versus 300px using the example, and finish by explaining why predictable dimensions simplify responsive layouts.