In CSS, box-sizing property is used to define how the Height and Width of an element is to be calculated by the browser. It specifies whether the padding and border of an element is to included/excluded in its total height and width.
Consider if we specify an element's width to be 300px, but, if the element is also having border and padding then by default the browser will display the element wider than 300px on the screen. And, this often results in confusion and inappropriate manipulations while designing the web page mostly in case of responsive design. To overcome this, we will use the box-sizing property.
It allows to use the following values:
Example:
In the above example, the box-sizing is set as content-box. So, the browser will not consider padding and border as part of element's actual height and width. Hence, the total width of the element is its (Width + Left Padding + Right Padding+ Left Border + Right Border), i.e. (300px + 30px + 30px + 10px + 10px) = 380px and height is its (Height + Top Padding + Bottom Padding + Top Border + Bottom Border), i.e. (100px + 30px + 30px + 10px + 10px) = 180px .
 |
| Height and Width of an element |
Consider if we specify an element's width to be 300px, but, if the element is also having border and padding then by default the browser will display the element wider than 300px on the screen. And, this often results in confusion and inappropriate manipulations while designing the web page mostly in case of responsive design. To overcome this, we will use the box-sizing property.
It allows to use the following values:
1. box-sizing: content-box
2. box-sizing: border-box
Note: content-box is the default value.
1. content-box
Use this to have an element's height and width including its border and padding.Example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid #963035;
}
</style>
</head>
<body>
<h4>content-box</h4>
<div id="div1">This is a DIV element with box-sizing:content-box</div>
</body>
</html>
The browser will display the above html page as shown below:
This is a DIV element with box-sizing: content-box
In the above example, the box-sizing is set as content-box. So, the browser will not consider padding and border as part of element's actual height and width. Hence, the total width of the element is its (Width + Left Padding + Right Padding+ Left Border + Right Border), i.e. (300px + 30px + 30px + 10px + 10px) = 380px and height is its (Height + Top Padding + Bottom Padding + Top Border + Bottom Border), i.e. (100px + 30px + 30px + 10px + 10px) = 180px .
2. border-box
Use this to have an element's height and width excluding its border and padding, so it refers only to element's content.
Example:
In the above example, the box-sizing is set as border-box. So, the browser will consider padding and border as part of element's actual height and width. Hence, the total width of the element is its actual Width, i.e. 300px and height is its actual height, i.e. 100px.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
box-sizing: border-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid #963035;
}
</style>
</head>
<body>
<h4>content-box</h4>
<div id="div1">This is a DIV element with box-sizing:content-box</div>
</body>
</html>
The browser will display the above html page as shown below:
This is a DIV element with box-sizing: border-box
In the above example, the box-sizing is set as border-box. So, the browser will consider padding and border as part of element's actual height and width. Hence, the total width of the element is its actual Width, i.e. 300px and height is its actual height, i.e. 100px.
Attention: In order to make box-sizing property work in all browsers, it is required to use browser-specific prefixes for this property declaration as shown below:
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /* For Firefox */
-webkit-box-sizing: border-box; /* For Safari */
}