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.
