Understanding CSS Box Sizing

The box sizing property is the single most useful property I have found ever since I started making websites. Border-box is the key to most website layouts simpler, to the point that even frameworks like Boostrap, Foundation and Susy use it.

In this post, you’ll get to understand what this property is, and how it might save you countless hours of frustrations for your next website.

CSS Box Sizing

If you know some CSS, you should have heard of the box model.

By default, the content of an element makes up its width. Box sizing allows you to change what makes up the width of the element.

Box Sizing Values

Box sizing can take up to 3 different values

  • content-box (default)
  • padding-box
  • border-box

As we can see above, the width of the element is determined by the box sizing property given.

At present, only content-box and border-box are commonly used and well support by browsers (IE 8+ and other major browsers).

Although padding-box might be useful in some cases, support for it is not great at the moment.

Whats the big deal?

Its much more intuitive to style with border-box than with content content-box. Here are two use cases that I often encounter and need border-box for.

Case 1: Setting Up Layouts

When setting up grids, its much easier for me to think this way: - Content takes up 75% of the space - Padding of 5% for breathing space - Sidebar takes up 25%

With that, my code will be

.content {
  width: 75%; 
  padding: 0 5%;
}

.sidebar {
  width: 25%; 
}

Instead of : - Content takes up 75% of the space - Padding of 5% for breathing space - Content width is therefore 75% – 10% = 65% - Sidebar takes up 25%

and the resulting code

.content {
  width: 65%; 
  padding: 0 5%;
}

.sidebar {
  width: 25%; 
}

Using content-box introduces a higher cognitive overload.

Case 2: When Width of Child Adds up to 100%

Instead of trying to explain in words, an example will probably be easier to explain.

How to use

Simple! Put these lines of code into your CSS File.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Or if you’re using Compass, border-box sizing is already built into a mixin.

* {
  @include box-sizing(border-box);
}

Performance hits with the * selector here isn’t an issue according to Paul Irish, so use away!

Usage with IE7

By any chance if you require a polyfill for IE7, the one made by Schepp is awesome.

Edges cases where content-box might be more useful

There are essentially none. But knowledge of both content-box and border-box allows you switch between the two if you ever need to!

Want more of this?

Get similar articles as soon as they are published

  • Minh Phạm

    Save a lot of time. But how does it work with IE6??

    • http://www.zell-weekeat.com/ Zell Liew

      Nope it doesn’t work with IE6.

      But if you really need support for IE7 and IE6, check out the polyfill I posted above.

  • Vladimir Maxymenko

    Great job Zell, I’m fascinated!

    Please, explain the way of further decoration of grid’s units as adding border.
    I followed you clear explanations and got a grid http://codepen.io/462960/full/RNrVJO/
    and, taking in account that global-box-sizing: border-box, I set .gallery__item border property.

    Border was expected to take inner space but it takes outer instead and brakes layout.

    • http://www.zell-weekeat.com/ Zell Liew

      Hey Vladimir,

      You declared global-box-sizing to be border-box on the Susy map, but you forgot to add this line to make everything border-box:

      @include border-box-sizing;

      PS: global-box-sizing doesn’t automatically apply border-box to all your elements :)

      • Vladimir Maxymenko

        Thank you so much!
        By the way, it could be a piece of reset or normalizer while using Susy (I love this name).
        Could you share point of view on this?
        What is the best for grid, based on Susy?

        • http://www.zell-weekeat.com/ Zell Liew

          I use normalize.css as a reset and I encourage you to do the same. http://necolas.github.io/normalize.css/

          The Susy map global-box-sizing is just a flag to tell susy that you are using border-box for everything. It doesn’t overwrite anything.

          The mixin is the one that creates the border-box properties for all the elements.

          Does that make it clear?