Bite Sized Basics: Box Sizing

— 3 minute read

If there’s ever one really important thing to remember when writing CSS is that everything is a box. Regardless of how it looks visually—it’s still a box.

A circle that has a box behind it to demonstrate how it works on the web
Even when an element has 100% border-radius, the browser treats it as a box.

Take the above example: it’s visually a circle, by proxy of border-radius, but it’s still a box, as far as the browser is concerned.

Padding and borders permalink

When we add padding and borders to an element, by default, their values will be added to the computed width and height. This can be confusing—especially when you are first starting out.

.box {
width: 100px;
padding: 10px;
border: 10px solid;
}

A stack of three boxes to represent width, padding and border. Width is set to 100px, while padding and border are set to 10px. There is a measure at the bottom which shows this calculated as 140px
The width, padding and border contributing to a 140px computed value.

What happens here is your .box’s computed width is actually calculated as 140px. This is how the box model works, out of the box (pun intended), and is expected behaviour. Most of the time though, it’s preferable for this not to be the case, so we add this little snippet of CSS:

.box {
box-sizing: border-box;
}

This completely transforms the browser’s calculation because what it does is say “Take the dimensions that I specified and also account for the padding and border, too”. What you get as a result, is a box that instead of being 140px wide, is now 100px wide, just like you specified!

The same example as above, but the box is now measured as 100px. This is demonstrated with all of the properties inside one box with a ghost of the old box behind it
The fixed box with a predictable width.

The box-sizing rule is usually added as a global selector to a reset, or default normalising styles, so to set a more complete example, this is how our box CSS now looks:

/* Reset rule */
*,
*::before,
*::after
{
box-sizing: border-box;
}

/* Box component */
.box {
width: 100px;
padding: 10px;
border: 10px solid;
}

What this now does is instead of just targeting the .box, it targets every element on the page and any pseudo-elements.

Wrapping up permalink

You can read more on box sizing over on MDN, where there is some very good documentation.

Setting box-sizing: border-box is such a life saver—especially for responsive design. This is so much the case that we even have “International box-sizing Awareness Day” on February 1st, every year.

Anyway: sign up for updates on Product Hunt, subscribe to the RSS feed or follow @cssfromscratch on Twitter to keep in the loop.