CSS Tutorial
CSS Box Sizing
border-box includes padding and border in width. Set it once on every element.
What width actually means
By default, width sizes the content box. Padding and border sit outside that number. A card with width: 200px, padding: 20px, and a 2px border paints 244 pixels wide. Put two of those in a 400-pixel row and they overflow. Beginners meet this as “my layout is 4 pixels too big and I cannot see why.”
box-sizing: border-box changes the contract. width includes padding and border. The content area shrinks to make room. The card you asked to be 200 pixels is 200 pixels on the outside. Harbor studio’s two-up desk cards suddenly fit.
content-box versus border-box
| Value | width includes | Default? |
|---|---|---|
content-box | Content only. Padding and border add extra | Yes, in CSS |
border-box | Content + padding + border | No — you set it |
Margin is never inside width, in either model. Margin is outside the border. Box-sizing does not touch it.
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.row { display: flex; gap: 1rem; align-items: flex-start; }
.box {
width: 140px;
padding: 16px;
border: 8px solid #0d9488;
background: #ccfbf1;
}
.content { box-sizing: content-box; }
.border { box-sizing: border-box; }
p { margin: 0; font-size: 0.9rem; }
.caption { margin-top: 0.4rem; color: #475569; font-size: 0.8rem; }
</style>
<h1>Harbor studio</h1>
<div class="row">
<div>
<div class="box content"><p>content-box</p></div>
<p class="caption">140 + 32 + 16 = 188px painted</p>
</div>
<div>
<div class="box border"><p>border-box</p></div>
<p class="caption">Still 140px outside</p>
</div>
</div>Same width, same padding, same border. Only box-sizing changed. The left box grew. The right box kept the 140-pixel outer width and gave the padding less room inside.
Set it once on every element
You do not want to remember border-box on each class. The usual reset is a universal selector, plus::before and ::after so generated boxes match. Inheritance of box-sizing is not the default, so the star is doing real work.
Example
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.desk {
width: 50%;
float: left;
padding: 1rem;
border: 2px solid #0284c7;
background: #e0f2fe;
}
h2 { margin: 0 0 0.35rem; font-size: 1rem; color: #0369a1; }
p { margin: 0; }
</style>
<h1>Harbor studio</h1>
<section class="desk">
<h2>Tide desk</h2>
<p>50% width, padding inside. It does not overflow the row.</p>
</section>
<section class="desk">
<h2>Pier desk</h2>
<p>The star rule made both boxes honest.</p>
</section>Put the star rule at the top of your stylesheet, before components. Then everywidth: 50% and every max-width: 40rem means the outer size you are picturing. Open this in /css/try and delete the star block: the two desks will no longer sit in one row.
A slightly kinder reset
Some people set box-sizing: border-box on html, thenbox-sizing: inherit on *. New elements inherit border-box, and you can still opt one widget back to content-box if a third-party component expects the old model.
Example
<style>
html { box-sizing: border-box; }
*,
*::before,
*::after { box-sizing: inherit; }
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.legacy {
box-sizing: content-box;
width: 120px;
padding: 12px;
border: 4px solid #0d9488;
background: #fff;
}
</style>
<p>Most of Harbor studio inherits border-box from html.</p>
<p class="legacy">This old widget opts back to content-box.</p>Form controls and some replaced elements had quirky box models in old browsers. On a modern engine, the global border-box rule is still the right default. After this chapter, widths in flex and grid chapters will mean what they look like.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Maths
border-box so width means the whole tile
content-box: width is the content only. border-box: width includes padding and border. A 160 px card with 16 px padding and 4 px border stays 160 px painted.
Set * { box-sizing: border-box } once. Mixing models is how columns overflow by 32 px and nobody knows why.
border-box width = content + padding + border
Example
<style>
* { box-sizing: border-box; }
.box { width: 160px; padding: 16px; border: 4px solid #0f766e; background: #ccfbf1; }
</style>
<div class="box">160 px includes padding.</div>Engineering
Two columns that actually add to 100%
With border-box, two 50% columns with padding still fit. With content-box they overflow. Dashboards live or die on this one line.
Example
<style>
* { box-sizing: border-box; }
.row { display: flex; }
.row div { width: 50%; padding: 0.5rem; background: #e0f2fe; }
</style>
<div class="row"><div>Menu</div><div>Hours</div></div>