Box model tweaking

  • Switching box models by CSS is possible in Mozilla, Explorer 5 on Mac and Opera 7.
  • Many thanks to Dylan Schiemann for informing me of the existence of this declaration.

     

    On this page I introduce the two box models. You can tweak the box model in some browsers by using an upcoming CSS3 declaration or its Mozilla equivalent.

    There are two box models, and it usually best to make sure that all browsers use the same one on your pages.

    Box models

    1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
    2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.
    The best?

    Personally I find W3C's box model completely counter-intuitive and illogical, and I feel that this is once again an area where W3C is specifying very complicated rules for the sake of specifying very complicated rules. 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.
    "

    Browser defaults

    Now which box model do the various browsers adhere to without any influence from doctypes and box model hacks and such?

    Changing box models

    Fortunately in most browsers you can change the box model to be used, either by using doctypes or by using the box-sizing declaration.

    Doctypes

    'Doctype switching' allows you to use the W3C box model in IE6 and Opera 7. Since I do not use doctypes I can't give any more information at this moment. I will create a short list of useful doctypes later on, though.

    To switch IE5 and 5.5, which don't support doctype switching, to the W3C model you need Tantek Çelik's famous Box Model Hack.

    box-sizing

    A new CSS3 declaration currently under consideration at W3C allows you to switch box models easily. The official syntax is:

    box-sizing: border-box
    box-sizing: content-box
    

    The first declaration will cause the box sizes to be applied to the border and everything inside it (traditional model), the second one will cause the box sizes to be applied to the content only (W3C model).

    Since Tantek Çelik, lead developer of Explorer on Mac, has written the CSS3 draft in which this declaration appears, we should not be surprised to find Explorer 5 Mac already supporting it. Opera 7 does, too.

    Furthermore Mozilla supports its own variation of this declaration:

    -moz-box-sizing: border-box;
    -moz-box-sizing: content-box;
    -moz-box-sizing: padding-box;
    

    The first two declarations behave exactly like their CSS3 counterparts. The third one is a Mozilla extension: it will cause the box sizes to be applied to the padding and everything inside it.

    So it's very easy to switch box models in Mozilla, Opera and Explorer on Mac, provided you use both W3C syntax and Mozilla syntax, like

    box-sizing: border-box
    -moz-box-sizing: border-box;
    

    Let's hope more browsers will start supporting this very useful declaration and that Mozilla will drop the prefix -moz-.

    Test

    Some boxes for your testing pleasure. The styles of the boxes are:

    div.test {
    	width: 300px;
    	padding: 10px;
    	border: 5px solid #000000;
    	margin-left: 10%;
    	margin-bottom: 10px;
    	margin-top: 10px;
    }
    

    The first box has no box-sizing declaration, the second to fourth use the various values of both the W3C draft property and the Mozilla property.

    No box-sizing defined
    Traditional box model width
    W3C box model width
    Mozilla's padding-box
    box-sizing: content-box
    box-sizing: border-box
    Traditional box model width
    W3C box model width
    Mozilla's padding-box
    box-sizing: padding-box

    I added margin-box on the off chance that any browser might start supporting it, currently none does.

    box-sizing: margin-box

    contents