Bite Sized Basics: Box Sizing

I originally posted this on https://cssfromscratch.com

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.

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

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;
}

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 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

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.