The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.
As we mostly work with extremely sensitive floated layouts, where even the addition of a 1px border can break the design, I wonder: did Internet Explorer get it right?
Box Sizing
“The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.”
Full Screencast
This means that, if you should decide that you want to mimic Internet Explorer’s original interpretation of the box model, you can. The default value for box-sizing is “content-box.” This simply means that the width and height of an element do not include the borders and padding (or margins).
By changing this value to “border-box,” the width and height values then include the borders and padding.
1 |
|
2 |
#box { |
3 |
width: 200px; |
4 |
height: 200px; |
5 |
background: red; |
6 |
|
7 |
padding: 10px; |
8 |
border: 10px solid black; |
9 |
|
10 |
-moz-box-sizing: border-box; |
11 |
-webkit-box-sizing: border-box; |
12 |
box-sizing: border-box; |
13 |
}
|
Because we’ve declared box-sizing with a value of “border-box,” the final width of the #box element, styled above, will be 200px.
Especially for floated layouts, this can save you a lot of headaches! But with that said, I’m still undecided. What are your thoughts on Internet Explorer’s interpretation of the box model?
