Why is the W3C box model considered better? [closed]

39
votes

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.

6
layoutcss
TL;DR, but answer to topic: because W3C is essentially a standard and people don't like it how Microsoft breaks all standards. – Tronic
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
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

6 Answers

13
votes

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.

8
votes

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.

4
votes

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
votes

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
votes

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.