Why is the W3C box model considered better? [close

Question

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 counter-intuitive. 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 whe 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 counter intuitive to use W3C's box-model. Some advice would be really appreciated.

Thanks!

Answer 1

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

Answer 2

One word answer - -box-sizing

You choose how you want your box model to work.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.