CSS Box Sizing
An element's width and height can be worked out in two ways, with padding and borders counted or left out, and the CSS box-sizing property picks which one applies.
Left alone, the browser leaves them out of the number you set and adds them afterwards:
- actual width = width + padding + border
- actual height = height + padding + border
So the padding and border sit on top of whatever size you specified, and an element often renders larger than you expected. box-sizing is the fix for this.
Example
Both <div> elements ask for the same width and height, yet they render at different sizes: only the second has the extra padding that grows it.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Without Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Without box-sizing</h2>
<div class="div1">This div has width: 300px and height: 100px.</div>
<br>
<div class="div2">This div also has width: 300px and height: 100px.</div>
<p>The two divs above end up with different sizes, because div2 has padding that is added to the specified width and height.</p>
</body>
</html>
The CSS box-sizing Solution
With box-sizing, padding and border can become part of the total width and height you declare. The value that does this is box-sizing: border-box;, which keeps them inside the calculation.
The outcome is so much better that many developers would like it on every element of their pages. Browsers already apply box-sizing: border-box; to many form elements, though not to all of them, which explains why inputs and text areas can differ at width: 100%;.
Setting box-sizing: border-box; on everything is both safe and sensible.
Example
Add box-sizing: border-box; to those two <div> elements and they now render at an identical size.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>With Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>With box-sizing: border-box</h2>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
<p>Both divs appear the same size because box-sizing: border-box includes padding and border in the total width and height.</p>
</body>
</html>
Universal box-sizing
To cover the whole page, put box-sizing: border-box; on the universal selector *.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Box Sizing</title>
<style>
* {
box-sizing: border-box;
}
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Universal box-sizing</h2>
<div class="div1">This div has width: 300px and height: 100px.</div>
<br>
<div class="div2">This div also has width: 300px and height: 100px.</div>
<p>With the universal selector (*) set to box-sizing: border-box, all elements include padding and border in their total width and height.</p>
</body>
</html>