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

In the W3C box model, the width of an element gives the width of the
content of the box, excluding padding and border.

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?

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 beta also use
the traditional model.

Mozilla and Konqueror/Safari follow W3C's standards, and Opera did up to the second
beta of Opera 7.

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

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