What is Box-Sizing in CSS? How Does it Work?

(This article was originally published in How To Debug CSS)

By default, when you specify the width or height of a box’ the actual calculation that CSS comes to for the width or height of that box (its box size) is slightly different from what you might expect.

By default, CSS first calculates the height and/or width that you’ve set, and then, if there are padding or border values set on the box as well, it adds them to the total box size after the fact.

This default method of measuring a box causes a problem.

It effectively increases the real height or width that we end up with on the page for the box.

It gives us a height and/or width that’s larger than the one we’ve actually set in our CSS.

Giving us a box size that we might not expect.

For example, if we set a 200pxwidth on a <div> box, like this:

HTML

<div>
  Our height/width box-sizing box.
</div>

CSS

div {
  border: 5px solid darkblue;
  padding: 10px;
  width: 200px;
  background-color: lightblue;
}

It gives us this:

Do you think that we’re getting a 200px width box here, as we might expect?

If we take a look at our box model pane, we can see this box’s “total” width calculation:

(code for this here: https://codepen.io/planflowdev/pen/yLVrmJd)

As you can see, our 200px width only applies to our content area.

The rest of the box is getting 10px of padding on each side (200px + 20px = 220px) and 5px of border on each side (220px + 10px = 230px).

So in the end, even though we have set 200px of width for our box, what we end up with from our box model calculation, is a rea box width (or box-sizing) of 230px!

This is how CSS calculates our box size (total width and/or height) by default.

But this goes against what we might expect as a natural result. 

We would expect our box size (both height and width) to match whatever we set our height and/or width to be within our CSS.

So how do we get the exact height and width that we want when we set it within our CSS?

The answer to this is to use the box-sizing: property.

To achieve the result that we expect from our box, and ensure our box dimensions (our height and width) remain as we have set them, we can set a value of border-box to our box-sizing property.

This tells CSS to set the height and/or width of our entire box to be from border to border. Rather than by just within our content area.

This ensures that our box’s total size does not ever exceed the height/width that we’ve set, no matter what padding and border values we apply to it.

Let’s take a look at how this would work by applying the box-sizing property to our previous example <div> box:

HTML

<div>
  Our height/width box-sizing box.
</div>

CSS

div {
  border: 5px solid darkblue;
  padding: 10px;
  width: 200px;
  box-sizing: border-box;
  background-color: lightblue;
}

Which gives us this:

(code for this here: https://codepen.io/planflowdev/pen/poNmLqO)

If you glance up to the previous example, you will notice that the output we have here is a bit smaller.

We can see this more clearly with our box model pane:

As you can see, we still have our padding and border measurements on the box. But what has changed is the measurement within the content area.

With the box-sizing property, with the border-box value applied, we now have a box that starts measuring its height and/or width from its border. Not from its content area.

Our box’s content area will now simply change size to accommodate any other (padding or border) size changes.

Applying “box-sizing: border-box;” to our <div> has shrunk our content area in order to make sure our total box size, including padding and border, comes to the 200px that we’ve set.

Our height and width are now locked in and fixed, allowing us to get the exact sized box that we’ve set within our CSS.

The box-sizing property also accepts another value: content-box.

This value reverts the box back to its default behaviour in CSS. Expanding its final measurements beyond the set height/width if the padding and border makes it do so.

With the border-box value, the height and/or width that we set becomes the height/width of the entire box.

With the content-box value, however, the height/width that we set will be the height/width of the content area of the box only.

Any additional padding or border measurements will be added to the overall final box size.

This is the default setting that we originally saw in the first <div> box example.

Now that we’ve gotten ourselves a decent grasp of the box model, and the different ways in which we can manipulate it, let’s take a look at one of the most important properties that can have an effect on our boxes (you can even use it to hide them completely!):

the “display” property.