The box-sizing property in CSS allows you to alter the default model for calculating an element’s size. An element’s width and height properties only apply to its content area. You added padding and border to the width and height of the element, which resulted in it being larger than you intended. The box-sizing property lets you adjust this behaviour.
Types of box-sizing property:
content-box
This is the default behaviour. The width and height properties specify the size of the element’s content box. Padding and border are added to this content box size to determine the total space the element takes up.
Example
<!DOCTYPE html>
<html>
<head>
<title>content-box Example</title>
<style>
.content-box-example {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content-box-example">This is content with content-box.</div>
</body>
</html>In this example, the width of the div is 200px and the height is 100px. Tthe total rendered width will be 200px (content) + 20px (left padding) + 20px (right padding) + 10px (left border) + 10px (right border) = 260px. Similarly, the total rendered height will be 100px (content) + 20px (top padding) + 20px (bottom padding) + 10px (top border) + 10px (bottom border) = 160px.
border-box
When you set box-sizing: border-box; the width and height properties include the content, padding, and border, but not the margin. This means that the total rendered width and height of the element will match the values you specify for width and height. We draw the padding and border within the specified dimensions, resulting in a smaller content area. This model is considered more intuitive for layout purposes.
<!DOCTYPE html>
<html>
<head>
<title>border-box Example</title>
<style>
.border-box-example {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid blue;
background-color: lightblue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="border-box-example">This is content with border-box.</div>
</body>
</html>In this case, box-sizing: border-box; is applied, the total extracted width of the div will be exactly 200px, and the total height will be exactly 100px. The padding and border are included within dimensions, making the actual content area smaller (200px – 20px – 20px – 10px – 10px = 140px width, and 100px – 20px – 20px – 10px – 10px = 40px height).
Applying border-box to all elements:
It’s a common practice to apply box-sizing: border-box; to all elements and pseudo-elements on a page for more predictable layout behavior. This can be done using the following CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}This sets box-sizing: border-box; on the html element and then makes all other elements inherit this value. This approach can make CSS layouts easier to manage because the specified width and height will consistently represent the total rendered size of the elements, including their padding and borders. You can still override this on specific elements if needed.
padding-box
Firefox provides additional support for this value with the -moz- prefix, making it less commonly used. When box-sizing: padding-box; is set, the width and height properties include the content and padding, but not the border. Next, we add the border beyond these dimensions.
<!DOCTYPE html>
<html>
<head>
<title>padding-box Example (Firefox)</title>
<style>
.padding-box-example {
width: 150px;
padding: 10px;
border: 10px solid green;
background-color: lightgreen;
-moz-box-sizing: padding-box; /* Firefox */
box-sizing: padding-box; /* Standard */
}
</style>
</head>
<body>
<div class="padding-box-example">This is content with padding-box.</div>
</body>
</html>In Firefox, the width of this div will be 150px (content) + 10px (left padding) + 10px (right padding) = 170px. We will then add a border of 10px on each side, resulting in a total rendered width of 170px + 10px + 10px = 190px. The same calculation would apply to the height. Other browsers that don’t support padding might default to content boxes.
CCS3 Topics