The CSS box-sizing property

In HTML, by default, every element is a rectangular shaped object. All the elements, irrespective of the shape in which they appear on the web page, are drawn and treated by the browser as a rectangular. Let’s understand the concept better with the help of a few examples

In the above example, we have an image whose width and height are 500px each. When we try to inspect the element, we see that the browser measures its shape as a square whose sides are 500px each.

The other image of the cat has a width and height of 500px, but it is a circular image (by setting border-radius to 50%). But we can see that the browser still measures its shape as a square, despite it appearing as a circle to the user.

Before we move to the topic of box-sizing, we first need to discuss how HTML measures the dimensions of an element. Let’s take the width dimension. HTML allows us to set the width of an element using the CSS property width. However, the space occupied by an element on the web page differs from the width assigned to it. The formula to calculate the total horizontal space occupied by an element is

    total horizontal space = width + padding-left + padding-right +
    border-right + border-left + margin-left + margin-right

As you can see, properties such as padding, border, and margin also account for the space occupied by an element in HTML. You can understand this better from the image below

As you can see, although we have set the width of the image to 500px, the total horizontal space occupied by the image includes its padding of 20px on either side, border of 20px, and margins of 40px on either side. So, the total space, according to the formula we discussed earlier is 500 + 20 + 20 + 40 + 40 + 60 + 60 = 740px.

Although this is the default method of calculating the space occupied by an element in HTML, this isn’t very favorable when it comes to designing our elements. Say you have an element that needs to have a fixed total width of 300px. You would first specify its width property in CSS as 300px. However, if you wish to add a border or padding to this element, since they add to the total width of the element, you would also need to reduce the width property of the element accordingly in order to maintain the fixed total width of 300px. In order to overcome this inconvenience, we have a property in CSS called box-sizing.

Box Sizing

The box-sizing property determines how the final space an element occupies on the web page is calculated. The default value for this property is content-box. When its set as the value, the final space occupied by the element is calculated as discussed in the previous section.

    div {
      box-sizing: content-box;
    }

However, there’s another value to this property called border-box. When border-box is applied, any padding or border applied to an element is enclosed within the original size of the element. Margins added to the element increase their final size as usual.

    div {
      box-sizing: border-box;
    }

So, the total horizontal space occupied by an element whose box-sizing is set to border-box will be calculated as

    total horizontal space = width + margin-left + margin-right

Let us understand this further using the same layout as before, but with box-sizing set to border-box

As you can see, the width is set as 500px in CSS. But unlike before, the padding of 20px as well as the border of 40px, on both sides, are included within the element rather than outside it. So, the base width of the element is calculated as 500–20–20–40–40=380px. However, the final width (excluding the margins) remains 500px only. And it will remain so, no matter what you set the border or padding as. This kind of box-sizing helps us in designing our webpages in an easier and simpler manner.

This post was originally published here on Medium.