Box-sizing in CSS

1. The Box Model

To understand how "box-sizing" works we have to understand something called the "box model".

Box Model: A rectangle is created around each and every element in the Html document by the browser. This rectangle is called the box model. You can this rectangle in the dev tools by opening the dev tools and selecting any element on the Html document.

This how a box model looks like in firefox's dev tool. Press f12 to open the dev tools.

This box model consists of four areas:

1. Content-box: The innermost rectangle is the "content-box". Its height and width are dependent on the type of content itself.
2. Padding-box: The next rectangle surrounding the content-box is the "padding-box". It depends on the padding of the element if there is no padding then it will be equal to the content-box.
3. Border-box: After the padding-box comes the "border-box". It is defined by the border width of the element. If border width is not defined then it will be equal to the padding-box.
4. Margin-box: The last rectangle is the "margin-box". It depends on the margin property of the element. It is equal to the border-box in the absence of the margin.

2. Box-sizing

The box-sizing property in CSS describes how the total height and width of an Html element is calculated.

Now we will look at the different values that box-sizing property can take.

2.1. content-box

content-box is the default box-sizing in CSS. When the box-sizing is set to the content-box the total height and width only include the height and width of the "content-box". All the other boxes like padding-box, border-box adds the extra height and width to the element.

Example:

Html

<div>
  <div class="box">
    Box with padding and margin
  </div>
  <div class="box second">
    Box without padding and margin
  </div>
</div>

CSS

.box{
  height: 10rem;
  width: 10rem;
  padding: 2rem;
  margin: 1rem;
  background: lightblue;
  border: 10px solid orange;
}
.second{
  padding:0;
  border: none;
}

Output:

As you can see both the boxes have the same height and width set on them but still they vary in size because the top box has extra padding and border on it and by default, the box-sizing is set to the content-box. So the width and height properties only include the content-box of the element and the border and padding adds the extra height and width to the top box.

2.2. border-box

border-box means that the total height and width of an element will include the "content-box + padding-box + border-box". The padding and border will not add extra height and width to the element which has box-sizing: border-box on it.

Example:

Taking the above example let's add the box-sizing: border-box on the box class.

.box{
  height: 10rem;
  width: 10rem;
  padding: 2rem;
  margin: 1rem;
  background: lightblue;
  border: 10px solid orange;
  box-sizing: border-box;
}
.second{
  padding:0;
  border: none;
}

Output:

Now both the boxes have the same height and width. The padding and border is not resulting in adding extra height and width to the top box because it has box-sizing: border-box on it and so its total height and width will also include border and padding to it.

Note: Setting box-sizing to border-box is no considered as a best practice and it is even recommended to use it universally in a style sheet.

2.3. initial

box-sizing: initial will set the box-sizing of an element back to default i.e content-box.

2.4. inherit

inherit will force an element to use the box-sizing same as its parent element.

3. Conclusion

After this, you should have a little bit better understanding of how box-sizing works and how to use it in CSS.