Box sizing

You already know how the HTML elements on a webpage are rendered:

• Each element is wrapped in a rectangular box.

• CSS properties like margin, padding, and border are associated with every element.

• These properties can be used to lay out the elements on the page.

You have also seen how to calculate the width and height of an element.

In this topic, you will learn about the box-sizing property, which was introduced in CSS3. It has content-box and border-box values that can make setting the width and height of elements simpler.

Box sizing

As you learned in the Box Model topic, to calculate the full width and height of an element, its padding, and border values must be taken into consideration.

The box-sizing property defines how width and height values are applied to an element. It allows you to control the way an element is placed on the document by specifying whether the width and height values include border and padding.

There are two box-sizing values that you can apply:

• content-box (default)

• border-box

Before we deep dive into the detail, let's look at an example that demonstrates the difference between content-box and border-box.

HTML:

<div class="content-box">Content Box</div>
<hr>
<div class="border-box">Border Box</div>

CSS:

div {
    border: 2px solid black;
    width: 150px;
    height: 150px;
    padding: 10px;
    background-color: aquamarine;

}
.content-box {
    box-sizing: content-box;
}
.border-box {
    box-sizing: border-box;
}

Output:

The above image demonstrates that there is a remarkable change in output caused by the different box-sizing values applied to the div elements. You'll learn more about why this happened in the following sections.

Content box

content-box is the default value of the box-sizing property. It specifies that the width and height of an element only include the content — they don't include the padding and border values. For block elements, the size of the content can be set using the following CSS properties: width, min-width, max-width, height, min-height, and max-height.

Take a look at the example below in which the orange part of the image contains the content. It illustrates how the total width and total height of an element is calculated if the box-sizing value is set to content-box.

CSS:

div {
  box-sizing: content-box;
  width: 260px;
  height: 120px;
}

As you can see, when the content-box value is applied, the content width is 260px and the content height is 120px (as specified in CSS). The total width and total height of the element will therefore vary depending on the padding and border values applied to the element.

You can see how this is calculated below:

Content width: 260px.

Content height: 120px.

Total width of the element: 260px + padding-left + padding-right + border-left + border-right.

Total height of the element: 120px + padding-top + padding-bottom + border-top + border-bottom.

Border box

When using box-sizing: border-box, the height and width of an element include any padding and border values. For instance, if an element has a height of 500px, padding of 30px and border of 5px on all sides, the total height of the element will be 500px.

Let's take another look at the example from the previous section with the box-sizing value set to border-box.

CSS:

div {
  box-sizing: border-box;
  width: 260px;
  height: 120px;
}

As shown above, with box-sizing set to border-box, the height and width values of the whole element are now 120px and 260px, respectively. Regardless of the padding and border values applied to this element, the total height and width of the element will remain the same.

The way this is calculated is shown below:

Total width of the element: 260px.

Total height of the element: 120px.

Content width: 260px - padding-left - padding-right - border-left - border-right.

Content height: 120px - padding-top - padding-bottom - border-top - border-bottom.

What to choose?

It's usually best to set the box-sizing value to border-box because this makes height and width calculations much easier. As explained in the previous section, if you specify that an element's width is 500px, it will be 500px no matter what its padding and border values are.

One slight drawback to using border-box is that very old browsers don't support it because it was introduced in CSS3. However, this is a minor problem as the vast majority of browsers in use today do support the property.

Conclusion

You already knew about the crucial role played by the CSS Box Model in specifying the width and height of elements on a webpage. And you have now learned that the box-sizing property allows you to determine whether padding and border are taken into account when calculating these dimensions. You have seen that using box-sizing: border-box makes it easier to calculate the total height and width of an element. Keep in mind that understanding the Box Model concept is vital when seeking to master other CSS properties.