How to Work With Box-sizing in CSS?

The CSS adds padding or border to an element by default after you define its height and width. Suppose you have four elements of 25% width each; if any of the elements has a left/right border or padding, the components won’t fit properly in the parent element. CSS box-sizing helps eliminate this issue.

CSS box-sizing enables you to define how you want the height and width of an element to be calculated. It means that you can use this property to specify whether the padding or border of the element should be included in the height and width or not. But before getting into the CSS box-sizing property, let’s delve a bit deeper into the problem it solves.

What Happens Without Using Box-Sizing?

If we don’t use the box-sizing property, then the styling will be done as default. This means that by default, CSS adds any padding or border of an element to its total height and width mentioned by the coder. Here’s how it looks in a mathematical representation.

Rendered height = defined height + padding (if any) + border (if any)

Rendered width = defined width + padding (if any) + border (if any)

Example:

Let’s consider an example for understanding this. Suppose you define a div with height and width as 150px and 300px, respectively. The div also has a border of 20px on each side. In this case, the calculations will be done as follows:

Rendered height = 150px (defined height) + 20px (top border) + 20px (bottom border) = 190px

Rendered width = 300px (defined width) + 20px (left border) + 20px (right border) = 340px

As you can see, the element’s size increases by 40px due to the 20px border. Similarly, when you define a component’s height and width and add padding or border, its size will increase. Let’s write a code for our above example to demonstrate this.

Here, we will create two div elements: one with a border and one without a border.

HTML Code:

<!DOCTYPE html>

<html>

<head>

<title>Without box-sizing example</title>

</head>

<body>

</body>

</html>

CSS Code:

.withborder {

width: 300px;

height: 150px;

background: yellow;

border: 20px solid black;

/* total height = 150px + 20px + 20px = 190px

and total width = 300px +20px +20px = 3340px */

}

.withoutborder {

width: 300px;

height: 150px;

background: yellow;

/* total height = 150px and total width = 300px */

}

Output:

Box_sizing_1

As you can see, the box model will display the sum of defined height and width + any border or padding as the element’s size. This can pose a challenge if you work with multiple elements in a box model. For instance, if you create three child boxes in a parent box and have assigned the 100% width and height among the three, the child boxes will go out of the parent box if any of them have padding or borders.

What Happens With Using Box-Sizing?

Now that we know the problem, let’s look at the solution, i.e., box-sizing. CSS box-sizing enables you to specify how the total rendered height and width should be calculated: including border and padding or not. So, you can change what was happening in the above example and include the div’s border as a part of the total height and width. Hence, the model will not add the 20px border to the already defined height and width. Instead, it will include the border within. Let’s use the same code and add the size-boxing property to it to see the difference in the output.