The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS3 box-sizing property, by default, the width and height of an element are calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
So, when you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height). The following illustration shows two <div> elements with the same specified width and height:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
.div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> <body> <div class="div1">This div is smaller (width is 300px and height is 100px).</div> <br /> <div class="div2">This div is bigger (width is also 300px and height is 100px).</div> <p>These two <div> elements are different sizes because div2 has a padding specified.</p> </body> |
This div is smaller (width is 300px and height is 100px).
This div is bigger (width is also 300px and height is 100px).
These two <div> elements are different sizes because div2 has a padding specified. |
For a long time web developers had to specify smaller width/height values than they wanted, because they had to subtract out the padding and borders. With CSS3, the box-sizing property solves this problem.
