Box-sizing: border-box vs content-box in CSS

CSS box-sizing is an important concept to understand for front-end developers. It defines how elements' width and height are calculated, and it can have a significant impact on the layout of a webpage. There are two values for box-sizing: border-box and content-box. In this article, we will discuss the differences between them and their use cases.

Box-sizing: content-box

By default, all HTML elements have box-sizing: content-box. This means that the width and height of an element do not include its padding and border. The content of the element is specified by the width and height properties, and any padding and border are added to the outside of the specified width and height. This can lead to unexpected layout issues, especially when dealing with nested elements.

Example

Consider the following HTML and CSS:

<div class="container">
  <div class="box"></div>
</div>

.container {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

.box {
  width: 100%;
  height: 100%;
  background-color: red;
}

With box-sizing: content-box, the width and height of the .box element will be 100% of the container's width and height, ignoring the padding and border. This will lead to the .box element overflowing the .container element, as shown in the following image:

When to use box-sizing: content-box

Box-sizing: content-box is useful when you want to specify the size of an element's content, and you want to add padding and/or border to the outside of that content. This is the default behavior, and is appropriate in most situations.

Box-sizing: border-box

Box-sizing: border-box is an alternative box model that can be used to simplify layout calculations. With border-box, the width and height of an element include its padding and border. This means that the actual content of the element will have a smaller width and height than specified.

Example

Using the same HTML and CSS as before, let's change the box-sizing property to border-box:

.container {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
}

.box {
  width: 100%;
  height: 100%;
  background-color: red;
}

With box-sizing: border-box, the width and height of the .box element will be equal to the container's width and height, taking into account the padding and border. This will prevent the .box element from overflowing the .container element, as shown in the following image:

When to use box-sizing: border-box

Box-sizing: border-box is particularly useful when you are dealing with nested elements, and you want to simplify the layout calculations. For example, if you have a grid of elements that are each 25% width and have 10px padding, you would need to subtract 20px from each element's width using content-box. With border-box, the width is already including padding, so you can use a simple 25% width.

Conclusion

In summary, box-sizing is an important CSS concept for layout calculations. By default, elements use content-box, which can lead to unexpected layout issues. Border-box includes padding and border in the width and height calculations, and can simplify nested element layouts. It is important for front-end developers to understand both box-sizing values and when to use each one.