Do you think IIT Guwahati certified course can help you in your career?
Introduction
Box sizing is an important CSS property that determines how the total width & height of an element is calculated. By default, when you set the width & height of an element, the CSS box model adds the element's padding & border to the dimensions you specify. This means the actual rendered width & height of the element can be larger than what you set. The box-sizing property lets you control this behavior, which allows you to include the padding & border in the element's total width & height.
In this article, we'll discuss the different values for box-sizing, how to use them with syntax & examples, & which browsers support this property.
Syntax
The syntax for the box-sizing property is:
box-sizing: value;
The `value` can be one of the following:
`content-box` (default)
`border-box`
Property Values
1. content-box (default)
The `content-box` is the default value for the `box-sizing` property. With this value, the specified `width` and `height` of an element only include the content area. The padding and border are added to the outside of the content box.
Syntax:
box-sizing: content-box;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.content-box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid #000;
box-sizing: content-box;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="content-box">
This div has box-sizing set to content-box.
</div>
</body>
</html>
Output
In this example, the actual rendered width of the div will be 260px (200px content width + 20px left padding + 20px right padding + 10px left border + 10px right border), & the actual rendered height will be 160px (100px content height + 20px top padding + 20px bottom padding + 10px top border + 10px bottom border).
2. Border-box
The `border-box` value for the `box-sizing` property contains the content, padding, and border in the specified width and height of an element. This means the actual rendered width and height will match the values you set, and the content area will shrink to accommodate the padding and border.
Syntax
box-sizing: border-box;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.border-box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid #000;
box-sizing: border-box;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="border-box">
This div has box-sizing set to border-box.
</div>
</body>
</html>
Output
In this example, the actual rendered width of the div will be 200px, & the actual rendered height will be 100px. The content area will be 140px wide (200px - 20px left padding - 20px right padding - 10px left border - 10px right border) & 40px high (100px - 20px top padding - 20px bottom padding - 10px top border - 10px bottom border).
Supported Browsers
The `box-sizing` property is supported by all modern browsers, like:
Chrome (all versions)
Firefox (all versions)
Safari (all versions)
Opera (all versions)
Internet Explorer (IE8+)
Microsoft Edge (all versions)
Frequently Asked Questions
What happens if I don't set the box-sizing property?
If you don't set the box-sizing property, the default value of content-box will be used. This means the element's specified width and height will only include the content area, and any padding or border will be added to the total size.
Can I set box-sizing globally for all elements?
Yes, you can use the universal selector (*) to apply box-sizing: border-box to all elements on your page. This can be helpful for creating a consistent layout across your website.
Does box-sizing affect the element's margin?
No, the box-sizing property only affects how the width, height, padding, & border of an element are calculated. It does not impact the element's margin.
Conclusion
In this article, we discussed the box-sizing property in CSS, which allows you to control how an element's total width & height are calculated. We covered the different values (content-box & border-box), their syntax, and provided examples of how to use them. We also discussed browser support for box-sizing.
518+ registered 
