38

Why do most developers consider the W3C box model to be better than the box model used by Internet Explorer?

It's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box model counterintuitive. For example, if margins, padding, and border were factored into the width, I could assign width values to all my columns without worrying about the number of columns, and any changes I make to their padding and margins.

With W3C's box model I have to worry about the number of columns I have, and develop something akin to a mathematical formula to calculate the correct width values when modifying margins and padding. Changing their values would be difficult, especially for complex layouts. Consider this small frame-work I wrote:

#content {
    margin:0 auto 30px auto;
    padding:0 30px 30px 30px;
    width: 900px;
}

    #content .column {
        float: left;
        margin:0 20px 20px 20px;
    }
    #content .first {
        margin-left: 0;
    }
    #content .last {
        margin-right: 0;
    }

        .width_1-4 {
            width: 195px;
        }
        .width_1-3 {
            width: 273px;
        }
        .width_1-2 {
            width: 430px;
        }
        .width_3-4 {
            width: 645px;
        }
        .width_1-1 {
            width: 900px;
        }

The values I assigned here will falter unless there are three columns, and thus margins at 0+20+20+20+20+0. It would be difficult to modify padding and margins; my entire widths would have to be recalculated. If column width incorporated padding and margins, all I would need to do is change the width and I have my layout. I'm less criticizing the box model and more hoping to understand why it's considered better as I'm finding it difficult to work with.

Am I doing this thing wrong? It just seems counterintuitive to use W3C's box model.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Mohamad
  • 34,731
  • 32
  • 140
  • 219
  • 2
    TL;DR, but answer to topic: because W3C is essentially a standard and people don't like it how Microsoft breaks all standards. – Tronic Mar 12 '10 at 01:06
  • 1
    great question. I personally think (for once) that microsoft have done it the right way but I blame both camps for the browser war. perhaps the wc3 should just cater for microsoft's approach by defining a new doctype that lets designers choose which box model they wish to implement. – stephenmurdoch Mar 12 '10 at 03:56
  • 4
    by the way, there is a REALLY easy way to get round the problem of padding breaking your layout. and that is to follow this simple mantra: width gets added to the container... padding gets added to the content within the container. your layout will never break. ever. – stephenmurdoch Mar 12 '10 at 03:58

6 Answers6

20

One word answer - -box-sizing

You choose how you want your box model to work.

Anurag
  • 140,337
  • 36
  • 221
  • 257
  • 1
    There's still so much css that I never even *suspected* might exist... +1 for that (now-bookmarked) link =) – David Thomas Mar 12 '10 at 01:12
  • 1
    I am in the same boat. Btw, this template layout module (part of CSS3) is the coolest thing I've ever seen for CSS. http://www.w3.org/TR/2009/WD-css3-layout-20090402/ – Anurag Mar 12 '10 at 01:15
  • @Anurag, I'm suddenly even more optimistic for CSS3. Here's hoping it's implemented *at least* as soon as html5... =) – David Thomas Mar 12 '10 at 01:20
  • @ricebowl Seeing the way w3 works has reaffirmed my faith in committees :) .. they're doing some awesomely brilliant stuff – Anurag Mar 12 '10 at 01:35
  • Hmmm...seeing the way that the W3 mostly-works affirms *my* faith in committees. Though I'll hand it to them, and happily, the more I read, and hear, about html 5 and css 3 the happier I become =) – David Thomas Mar 12 '10 at 02:05
  • Thanks everyone for your input. But specifying my own box-sizing does not work in internet explorer 8 (ironically it insists on using the W3C model now) unless I remove the !Doctype from the page header. I don't know if doing so has a negative impact on the page. – Mohamad Mar 12 '10 at 02:27
  • My bad, only when IE8 is in "compatibility mode," which, if I understand this correctly, is emulating IE7? – Mohamad Mar 12 '10 at 02:29
  • I don't have access to IE, but are you using `-ms-box-sizing` or `box-sizing`? I thought browsers were still waiting for the spec to finalize before they remove the `-webkit`, `-moz` and `-ms` prefixes. – Anurag Mar 12 '10 at 02:41
  • I was using -ms-box-sizing, which did not work. I just added box-sizing, and that works in IE8. This is strange though: If CSS3 is not supported yet, and the whole purpose of the prefixes is to support something that has not been released yet, why does IE8 work in the opposite? Or am I getting this horrible wrong? – Mohamad Mar 12 '10 at 02:47
  • @Mel, welcome to web-development, young Padewan. Eventually it stops hurting...Promise! =) – David Thomas Mar 12 '10 at 02:48
  • lol @ricebowl, web development is not a science, nor an art. it's embracing the philosophy that there is chaos in this world and abandoning all libraries that try to abstract it away. A true ninja will always code fearlessly `if(IE5) {..} else if(IE6) {..} else if(IE6.1) {..} else if(FF1.5.2) {..}` and so on – Anurag Mar 12 '10 at 03:16
  • To be honest with you, I'm really frustrated. We have so much technology today, yet creating a CSS layout that makes senses hardly involves any sensible code. Every layer of complexity makes it a bigger pain! – Mohamad Mar 12 '10 at 04:22
13

Not everyone considers it to be better. To extract a quote from Quirksmode.

Personally I find W3C's box model counter-intuitive. To quote myself:

Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He'll measure the distance between the sides of the box (the 'borders'). No one will think of measuring the content of the box.

Web designers who create boxes for holding content care about the visible width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.

I agree, the border-box model makes more sense (at least, it does to me). There were disputes over the original W3C box model, leading to the definition of the box-sizing property in CSS3.

Community
  • 1
  • 1
Andy E
  • 338,112
  • 86
  • 474
  • 445
  • I've found `border-box` useful in certain situations but I've never had trouble with the CSS1 model: every element creates several nested boxes *whether they are visible or not* and `width` describes the original (innermost) box. `width: 30em` will fit lines 30em long and `width: 320px` will fit a 320px image inside. – sam Oct 07 '13 at 01:28
8

Personally, I prefer -to my occasional shame- IE's box-model. As noted by the OP it seems to make more sense to have a pre-defined width from which margin, padding and border-width are subtracted, than to have a width to which these are then added.

On the other hand, I can work with both models quite happily, all I really want is consistency between implementations, whichever implementation is chosen.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 10
    Once I got into accidentally coding for IE's box model and became a fan of it. That's the perfect logic for a box. Ask W3C to run a container shipping firm, and it's dead in a week. – Nirmal Mar 12 '10 at 01:20
  • @Nirmal, yup. I think that's basically the same argument that PPK makes, at the Quirksmode links. I was going to quote it but, by the time I'd remembered where it was, @Anurag and, I think, @Andy E. had already linked/quoted, so it seemed redundant. I accept that the spec is always going to be *arbitrary*, but it would be nice for it to be *rational* as well. – David Thomas Mar 12 '10 at 01:28
  • @Nirmal, not to mention that by the time they've agreed the shipping manifest, the loading-orders, the schedule and the route you'd be looking at something like 2025 to get the book you ordered in 2004... =) – David Thomas Mar 12 '10 at 01:30
5

While I find that W3C gets it right most of the time, in this particular case, I have to say that IE's box model is superior.

One common issue that I often encounter is when I want to set the width to be a percentage and have a pixel padding as well. To get a div to stretch to 100% and add padding, I am forced to use two divs instead of one - Otherwise applying the 100% on a single div will actually turn out to be more than you expect after the padding is factored in. It makes it really difficult to work with fluid layouts.

Jon
  • 1,224
  • 2
  • 14
  • 23
2

It is not so much an issue of which is better or worse, but which follows the standard from an accepted organization and which not..

On the other hand of your problems would be someone who wants his text wrapped inside a 300px container, which has a distance of 10 pixels from the next one.. Now you would have to make the same calculations as your example in order to calculate the width.. it is a case of how you view the same problem..

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
-3

If you always use padding, border and margin to a box, the IE-model may look better and more logical, but it's rarely the case. Yes, the WC3 box model is a little bit more complicated, but it pays back in terms of possibilities and strict "to-the-pixel" control over your layout. Once you make enough layouts with the box model you get accustomed to it quiet well, once you explore it's power and you'll never want to even consider the IE-bugs a better way of doing web layouts. Trust me, been there.

Ilia Penchev
  • 3
  • 1