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

What does box-sizing: content-box mean for the width property?

Short interview answer

It means width and height apply only to the content area, so any padding and border you add are added on top of that number, making the rendered box larger than the declared width and height.

Example

CSS
/* content-box (the default) */.box { box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid; }/* rendered width = 200 + 20*2 + 5*2 = 250px */

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