Ever set an element to a fixed width… and it still ends up bigger than you expected?
That’s the CSS box model quietly doing math behind your back.
By default, <code>box-sizing</code> is set to <code>content-box</code>, which means the width you set applies only to the content. Padding and border get added on top of that number.
So if you write:
<pre><code>.box {
 box-sizing: content-box;
 width: 300px;
 padding: 10px;
 border: 10px solid red;
}
</code></pre>
You don’t get a 300px box. You get:
300px (content) + 20px (padding L/R) + 20px (border L/R) = 340px total width
This is why layouts “mysteriously” overflow or misalign.
Switching to <code>border-box</code> flips the formula so the width you set becomes the total width:
<pre><code>.box {
 box-sizing: border-box;
 width: 300px;
 padding: 10px;
 border: 10px solid red;
}
</code></pre>
Now everything fits inside the 300px you intended.
Most developers set this globally to keep layouts predictable:
<pre><code>* { box-sizing: border-box; }
</code></pre>
Some browsers and editors already apply it to certain elements, which is why many teams prefer to enforce it consistently from the start.
Do you use <code>border-box</code> everywhere, or only in specific components?

The official squad of HTML All The Things. Browse a curated list of web development, web design, and small business content - curated by none other than our official team and our esteemed community members!

Better Layouts w/ Box-Sizing