CSS Box Sizing

The CSS box-sizing is a way to calculate the total height and width of an HTML element. Generally, when we specify the height and width property to any HTML element along with padding and margin. The value of padding and border are added to the values of height and width of the element and the element takes more space than its actual size.

In CSS2, the height and width of an element are calculated as:

width + padding + border = actual width

height + padding + border = actual height

The above formula specifies that when we set the padding and border of an HTML element, it acquires a little bit more space than the actual measurements you have set for that element. This is because the border and padding property of the element is not included in the specified height and width of the element.

Syntax of box-sizing property in CSS

HTML element/Selector {

/* CSS property */

box-sizing: content-box | border-box | initial | inherit;

}

Example of box-sizing property in CSS

In the given example, we have demonstrated that when we specify the padding and border of the element along with its height and width property then the element gets bigger in size than the actual size.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Sizing</title>
	<style> 
		.box1 {
		  width: 300px;
		  height: 100px;
		  border: 1px solid blue;
		  margin-bottom: 30px;
		}

		.box2 {
		  width: 300px;
		  height: 100px;  
		  padding: 50px;
		  border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="box1">This div element has width:300px; and height:100px;.</div>
	<div class="box2">This div element has width:300px; and height;100px;.</div>
</body>
</html>

Output:

As we can see in the output image, the second box is bigger than the first one even when the dimensions of both the boxes are the same. This is because we have specified the CSS padding property with the value 50px so the second box takes 50px more space from all the sides than the first box.

Creating box using box-sizing in CSS

The CSS box-sizing property includes the padding and border width in the specified height and width of the element. So, whenever the user adds the padding and border to any element along with their height and width property, then the element's size does not get bigger than the actual ones. To do so, we have to specify the CSS property box-sizing: border-box;.

Example: Creating box using CSS box-sizing property

In this example, we have created two Boxes using the <div> element. Then, we have applied the border and padding along with the height and width properties to both the boxes. In the second box, we have also applied the box-sizing: border-box; property. So, the first box gets bigger in size than its actual size, and the second box.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Sizing</title>
	<style> 
		.box1 {
		  width: 300px;
		  height: 100px;
		  border: 1px solid blue;
		  padding: 40px;
		  margin-bottom: 30px;
		  
		}

		.box2 {
		  width: 300px;
		  height: 100px;  
		  padding: 40px;
		  border: 1px solid blue;
  		  box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="box1">This div element has width:300px; and height:100px;.</div>
	<div class="box2">This div element has width:300px; and height;100px;.</div>
</body>
</html>

Output:

CSS box-sizing property values in CSS

The CSS offers four different values of the box-sizing property, these are given below:

S.No. Value Description
1. border-box The height and width properties include the border, padding, and content.
2. content-box This is the default value. The height and width property only includes the content, not the padding and border.
3. initial It sets the value of the CSS property to its default value.
4. inherit It inherits the value of the CSS property of its parent element.

Live Example: Applying different values of the box-sizing property in CSS

In the following example, we have created two boxes using the <div> element. In the first box, we have applied the box-sizing: content-box; property, and in the second one we have applied the CSS box-sizing: border-box; property.