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.

3
  • 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, 2010 at 1: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. Mar 12, 2010 at 3: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. Mar 12, 2010 at 3:58

6 Answers 6

20

One word answer - -box-sizing

You choose how you want your box model to work.

12
  • 1
    There's still so much css that I never even suspected might exist... +1 for that (now-bookmarked) link =) Mar 12, 2010 at 1: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. w3.org/TR/2009/WD-css3-layout-20090402
    – Anurag
    Mar 12, 2010 at 1:15
  • @Anurag, I'm suddenly even more optimistic for CSS3. Here's hoping it's implemented at least as soon as html5... =) Mar 12, 2010 at 1:20
  • @ricebowl Seeing the way w3 works has reaffirmed my faith in committees :) .. they're doing some awesomely brilliant stuff
    – Anurag
    Mar 12, 2010 at 1: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 =) Mar 12, 2010 at 2:05
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.

1
  • 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 7, 2013 at 1: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.

3
  • 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, 2010 at 1: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. Mar 12, 2010 at 1: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... =) Mar 12, 2010 at 1: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.

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

3
  • 4
    "Luke, you're going to find that many of the truths we cling to depend greatly on our own point of view." =b Mar 12, 2010 at 1:33
  • 1
    @ricebowl, lol. Deep runs within you the force.. Mar 12, 2010 at 1:49
  • 1
    that is solved with a margin, which never has been added to the width Jun 7, 2011 at 12:57
-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.

1
  • 5
    If you'd given any specifics at all in your answer, we wouldn't have to trust you.
    – mhsmith
    Jun 11, 2013 at 18:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.