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>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="withborder"></div>
<div class="withoutborder"></div>
</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:
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.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>With box-sizing example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="withborder"></div>
<div class="withoutborder"></div>
</body>
</html>
CSS Code:
.withborder {
width: 300px;
height: 150px;
background: yellow;
border: 20px solid black;
box-sizing: border-box;
}
.withoutborder {
width: 300px;
height: 150px;
background: yellow;
box-sizing: border-box;
}
Output:
As you can see, the 20px border was adjusted to the already defined height and width and not added to it.
Syntax of Box-Sizing
The syntax for CSS box-sizing property is:
box-sizing: content-box | border-box
The box-sizing property accepts two values: content-box and border-box. Let’s learn more about them.
CSS Box-Sizing: Content-Box
Content-box is the default value of the size-boxing property. It works similar to what we have seen in the without box-sizing section. So, if you define the width of a div as 200px and then add 20px padding and 10px border to it, the finally rendered width will be greater than 200px, as per the calculations shown above. The same will be valid for height as well. Let’s look at the code for the same.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Without box-sizing example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="withborder">
<p>Box-sizing: content-box example</p>
</div>
</body>
</html>
CSS Code:
.withborder {
width: 200px;
height: 100px;
background: yellow;
border: 10px solid black;
padding: 20px;
box-sizing: content-box;
}
Output:
CSS Box-Sizing: Border-Box
The border-box value will include everything, content, padding, and border, within the height and width specified. It means that if you set the width to be 200px, the finally rendered element will not exceed 200px width and include the padding, border, and content within it. Let’s use the same example as for the content-box value, but this time with the border-box value.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Without box-sizing example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="withborder">
<p>Box-sizing: content-box example</p>
</div>
</body>
</html>
CSS Code:
.withborder {
width: 200px;
height: 100px;
background: yellow;
border: 10px solid black;
padding: 20px;
box-sizing: border-box;
}
Output:
As you can see, the padding, border, and content were calculated as a part of the total 200px. Hence, the text moved a little towards the down from where it was displayed in the last result.
Browsers That Support CSS Box-Sizing
The following browsers support CSS box-sizing property:
Browser Name |
Version |
|
Google Chrome |
10.0.4.0 -webkit- |
|
Internet Explorer |
8.0 |
|
Microsoft Edge |
12.0 |
|
Firefox |
29.0.2.0 -moz- |
|
Safari |
9.5 |
|
Opera |
5.1.3.2 -webkit- |
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
With the CSS box-sizing property, you get to decide how the box model should calculate the height and width of an element. It is recommended to use border-box values when laying elements to make the calculations easier. However, if you are using the position property, using the content-box value is recommended to allow the size to be relative to the content. It’s time to use the property in your code and play with it to get acquainted with how the property works when laying out elements for styling a webpage. You can learn more about such fundamental CSS concepts by referring to Simplilearn’s CSS Tutorial for Beginners or the Advanced CSS Tutorial. These tutorials will help you better grasp the most required CSS concepts.
Besides learning CSS programming, you also need to get acquainted with other front-end programming languages because CSS is just a styling language that will allow you to style a page, which you can create using other front-end technologies. Hence, to become a successful front-end developer and land a high-paying job, learning all the major front-end programming languages is vital. You can enroll in our Post Graduate Program in Full-Stack Web Development, or opt for our 90-day free Front-End Web Development Course. These programs offer several hours of applied learning and hands-on practice for better understanding of concepts. Also, on course completion, you get a certification that will add credibility to your resume and help you find better job opportunities.
