Quick Tip: Did Internet Explorer get the Box Model Right?
videos

Quick Tip: Did Internet Explorer get the Box Model Right?

on Jun 11th 2010 with 140 comments
Tutorial Details
  • Completion Time: 5 Minutes

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?


Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?

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.”

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.

#box {
 width: 200px;
 height: 200px;
 background: red;

 padding: 10px;
 border: 10px solid black;

 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

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?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • samarjit

    CSS is broken in many sense, its sad to see that it is still broken in CSS3. In css they are adding more workarounds to work on simple problems. Like overflow:hidden, display:table, display:inline-block and some quirks to trigger hasLayout in IE.They are creating HTML5 and carrying forward evils from HTML1.0 really stupid.

  • http://www.weknowtoomuch.com Rolfen

    Simple answer, yes :-)
    Yet the W3C model would still be OK, if only there was the possibility to have negative margins and negative border width.
    But with the current standards-compliant model, you’ll have to use something like a background image if you want an “inner border”.

  • http://www.joezimjs.com Joe Zim

    I feel like each one is better for different situations. Sometimes it’s nice to just know the size you can make content within the container without needing to do math, while sometimes it’s nicer to know how much space you are taking up.

← Older Comments