CSS3 box-sizing

Just when you thought you had the CSS box model figured out, you don’t. The upcoming recommendation for CSS3 may contain a new property called box-sizing. This property has two possible values:
box-sizing: border-box
box-sizing: content-box

According to helphant.com, here’s the basic difference:

CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width.

The difference is basically the difference between the IE5 and W3C box models. The default will still be the W3C way we’re all used to where the padding and borders will be added to the width, it’ll just be possible to opt into the other way when it makes things easier.

To quote the W3C directly,

content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.
border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Note. This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.

At Coding & Dreaming, we get a hint about why this new property is being considered by the W3C.

The age-old problem of having to use the conventional Level 2.1 box model in conjunction with padding and/or border values is solved using CSS3. Up until now, this problem was a major stumbling block for developers, particularly in the instance of specifying a border/padding value in relation to a fluid length element, but the new ‘box-sizing’ property answers this problem.

OK. Far be it from me to suggest that this is the way IE worked for years and has been considered “broken” by the W3C for a long time. Maybe it was the right way all along.

At Quirksmode, PPK quotes himself, saying,

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.

Since all the sources quoted above put together visuals of both border-box and content-box, I hope you pay them a visit to read the full articles and see the visuals.