Box model tweaking

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's 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 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?

• Not surprisingly, Explorer keeps to the Microsoft model, with the interesting exception of Explorer 4 on Mac, which uses the W3C model. Netscape 4 and Opera 7 also use the traditional model.
• Mozilla, Konqueror/Safari and Opera 6 and lower follow W3C's standards.
• Surprisingly, Omniweb follows Mozilla's padding-box variation.
• iCab's box model is hard to fathom, it seems to follow the W3C model, but its boxes are slightly too short.

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

If you use a doctype to switch to 'Strict mode', Explorer 6 Windows and Opera 7 switch to the W3C box model. To move Explorer 5 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.

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

max-width

The second series of tests uses max-width instead of width. Mozilla and Opera are the only two browsers that support both max-width and box-sizing. However, neither of them applies the box-sizing to an element with max-width.