Skip to content
FrontendHaltFrontendHalt
CSS·Beginner·Coding·1 min read

What does box-sizing: border-box change?

Short interview answer

It makes width and height include content, padding, and border together, so adding padding or a border shrinks the available content area instead of growing the element's total footprint — this is why most resets apply it globally.

Example

CSS
.box { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid; }/* rendered width = 200px; content area = 200 - 20*2 - 5*2 = 150px */
*, *::before, *::after { box-sizing: border-box; } /* common reset */

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to The CSS box model

Related questions