How the CSS Box Sizing Property Works

Learn how to use the CSS box-sizing property to control how the browser calculates and renders the width and height of your HTML elements.

box-sizing (content-box vs border-box)

The CSS box-sizing property has two values:

• content-box (default)
• border-box

Both box-sizing values affect how the browser calculates and renders the size of HTML elements, but that’s the only thing they have in common.

content-box

By default all HTML elements use the content-box value:

box-sizing: content-box;

This means that if you have an element with the following styles:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

Then the width and height of that element are calculated as 134px, not 100px as you specified in your CSS stylesheet. The result:

This happens because content-box adds together the width/height values with the border (1px on each side) and padding (16px on each side) values, and renders elements sizes at the sum of those values:

• Element width: 1 + 16 + 100 + 16 + 1 = 134 pixels.
• Element height: 1 + 16 + 100 + 16 + 1 = 134 pixels.

This default behavior from content-box can be quite annoying to work with, but fortunately, it’s easy to change it!

border-box to the rescue

You can easily override the content-box value with the border-box value, which has the opposite effect on how the browser calculates elements’ sizes:

box-sizing: border-box;

By setting your box-sizing property to border-box the browser will render your elements at the precise width and height that you specify on the element with the height and width properties:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box; 
}

Result:

The border-box value makes the browser include (not add) the specified padding and border values when it calculates the element’s total width and height.

With border-box, no matter which padding or border value you add to your element, the element’s total size will be the value that you specify on the height and width properties.

For good measure here’s a side-by-side comparison:

Both elements above have a specified width and height of 100 pixels, but only the 2nd element respects those specified values because it uses border-box.

content-box vs border-box summed up:

• content-box combines padding and border values with elements height/width values and renders the total.
• border-box includes padding and border values as part of the element’s width/height.

Use border-box on everything

Now you know that border-box makes browsers render HTML elements at the actual size that you specify in your CSS. But how do you apply border-box on all your HTML elements?

It’s as simple as adding the following CSS rule-set at the very top of your stylesheet:

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

The code above uses CSS’s universal selector * to apply border-box value to the box-sizing property on:

• All normal element selectors (div, p, button, etc.)
• All :before and :after psuedo selectors

By using border-box on all your HTML elements, you no longer have to worry about how your browser renders the size of your elements. It will always be the height and width that you specify yourself.