The CSS box-sizing property is used to adjust or control the size of any element that accepts a width or height by specifying how to calculate the total width and height of that element.

In this article, I will explain how the CSS box-sizing property can be used to control the size of elements.

Prerequisites

• Basic CSS knowledge.
• Code editor.
• Web browser.

Without the CSS box-sizing property

If you look at the code snippet below, you will notice that there are two div elements with the same width and height but the first div appears to be bigger than the second div.

That's pretty strange because the reason why anyone would assign same width and height to two div elements is because they ideally want those elements to have same.

Keep reading to find out why the two div elements are different👨🏾‍💻👩🏽‍💻.

By default, the CSS box model calculates any element that accepts a width or height in this format:

• width + padding + border = rendered or displayed width of the element's box.
• height + padding + border = rendered or displayed height of the element's box.

This means that whenever you add padding or border to the element, the size of an element will appear bigger than the size originally assigned to it because the content of that element includes the width and height properties but does not include the padding or border property.

Still don't get it yet? Look at the code snippet below to see the actual calculation.

.first-box {
  width: 200px;
  height: 100px;
  border: 8px solid blue;
  padding: 20px;
  background: yellow;
  /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px
     Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */
}

.second-box {
  width: 200px;
  height: 100px;
  border: 8px solid blue;
  background: yellow;
  /* Total width: 200px + (2 * 8px) = 216px
     Total height: 100px +  (2 * 8px) = 116px */
}

As seen in the code snippet, CSS adds the padding and border to the width and height already specified and displayed the total value as the size of the element thereby ignoring the actual size you assigned to the div.

With the CSS box-sizing Property

With the box-sizing property, the default behaviour explained above can be changed.

Using the same code, let's add box-sizing property and set it to border-box and see if we can actually control the size.

You must have noticed that the two div elements now have the same size.

Syntax

box-sizing:content-box;
box-sizing:border-box;

content-box

This is the default behaviour of the box-sizing property. content-box doesn't take into account the width and height specified for an element. That is, if you set an element's width to 200 pixels, then set the border to 8 pixels and the padding to 20 pixels, the size of the border and padding will be added to the final rendered width, making the element wider than 200 pixels.

div{
  box-sizing:content-box;
  width: 200px;
  border: 8px solid blue;
  padding: 20px;
  background: yellow;
  /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/
}

As seen in the code snippet above, the size of this div element has automatically increased to 256px even when it was originally set to 200px.

border-box

When you set the box-sizing property to border-box, it tells the browser to account for any border and padding assigned to the element's width and height.

That is, if you set an element's width to 200 pixels, that 200 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.

div{
  box-sizing:border-box;
  width: 200px;
  border: 8px solid blue;
  padding: 20px;
  background: yellow;
  /* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/
}

As seen in the code snippet above, the size of this div element has automatically reduced to 144px even when it was originally set to 200px.

Let's merge both code snippet and see exactly how the box will look with content-box and border-box.

Conclusion

With the CSS box-sizing property, you have the ability to set how the size of elements in your code are calculated.

According to MDN, it is often useful to setbox-sizing to border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.

That's all folks! I hope this was helpful. If so, like this article and follow me on Twitter.