What is CSS Box sizing Property?
- The CSS box-sizing property is used to specify how to calculate the total height and width of an element.
- It controls the size of an element with a specified height and width.
- It allows you to include the padding and border within the total height and width of the element.
Prior to delving into CSS box-sizing, it's essential to grasp the repercussions that arise from neglecting the utilization of this particular attribute.
Without CSS box-sizing
If the box-sizing property is omitted, the box model will function as follows by default:
width + padding + border = actual visible width of an element's box
height + padding + border = actual visible height of an element's box
If we set dimensions for a box and include padding and border, the box will appear broader than its original width.
To address this issue, programmers must modify the height and width values to accommodate the border and padding. Let's illustrate this concept with an instance:
Example: Let's generate two div elements that have identical height and width, yet distinct border styles and padding configurations.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style media="screen">
.div1{
height: 150px;
width: 400px;
border: 10px solid green;
}
.div2{
height: 150px;
width: 400px;
border: 10px solid yellow;
padding: 20px; }
</style>
</head>
<body>
<h1>Without box-sizing property</h1>
<div class="div1">
I am the first div with no padding.
</div>
<div class="div2">
I am the second div with padding added.
</div>
</body>
</html>
In the preceding code snippet, we have generated two div elements that possess identical dimensions. The initial div lacks any padding, while the subsequent one incorporates padding.
Output:
It will generate the output as:
As demonstrated in the preceding output, two div elements are displayed with varying sizes. Even though we assigned identical sizes to both divs, the second one appears larger than the first.
This represents a common problem within the CSS box model. The box-sizing property is instrumental in addressing and resolving this particular issue.
With CSS box-sizing property
The prior problem can be solved by implementing the CSS box-sizing attribute. Next, we will apply the identical code from before, but this time with the addition of the box-sizing property.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style media="screen">
.div1{
height: 150px;
width: 400px;
border: 10px solid green;
box-sizing: border-box;
}
.div2{
height: 150px;
width: 400px;
border: 10px solid yellow;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>With box-sizing property</h1>
<div class="div1">
I am the first div with no padding.
</div>
<div class="div2">
I am the second div with padding added.
</div>
</body>
</html>
In the code snippet provided, we utilized two div elements with identical height and width specifications, and applied the box-sizing property to each div.
Output:
As demonstrated in the preceding output, both div elements now possess identical widths.
Syntax
Syntax of box-sizing property is given as:
box-sizing: border-box; // for border box
box-sizing: content-box; // for content box
Value: CSS box-sizing property offers two options: border-box and content box. They are explained as follows:
- border-box: This value serves as an alternative to the default setting in the CSS box-sizing property. When utilizing this value, the height and width attributes consider the content along with the margin, padding, and border values. For instance, if you set the width of an element to 200px, the total width will be 200px inclusive of margin, padding, and border. For instance, if an element is defined with the following dimensions: {width: 500px; border: 10px solid black;}, the resulting box will have a size of 500px.
In this case, the measurement of worth is computed as follows:
Width= width of the content
Hight= height of the content
Example:
<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 300px;
height: 150px;
padding: 20px;
border: 10px solid black;
background: #4caf50;
color: red;
box-sizing: content-box;}
</style>
</head>
<body style = "text-align: center;">
<h2>box-sizing: content-box</h2>
<br>
<div>
<p><b>C# Tutorial</b><br>
<i>Best Portal to learn technologies</i></p>
</div>
</body>
</html>
In the preceding code, we have implemented the content-box value of the box-sizing property.
- : The border-box value is a commonly utilized option for the box-sizing property. This value instructs the browser to incorporate the border and padding within the defined height and width of an element. Essentially, when we set the width of an element to 200 px, the specified border and padding will be contained within this 200 px, with the content box adjusting for any additional width. Consider an element with the following size constraints:
{width: 500px;
border: 10px solid black;}
The browser will present a container of dimensions 500, within which a width of 480px will be allocated.
In this case, the width and height are determined by factoring in the content, border, and padding, excluding the margin.
The dimensions of the element are calculated as:
Width = border + padding + width of the content
Height = border + padding + height of the content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 300px;
height: 150px;
padding: 20px;
border: 10px solid black;
background: #4caf50;
color: red;
box-sizing: border-box;
}
</style>
</head>
<body style = "text-align: center;">
<h2>box-sizing: border-box</h2>
<br>
<div>
<p><b>C# Tutorial</b><br>
<i>Best Portal to learn technologies</i></p>
</div>
</body>
</html>
In the provided code snippet, the border-box value of the box-sizing attribute has been implemented.
Output: