HTML and CSS Reference
In-Depth Information
■
The draft CSS3 box model proposes adding support for text that runs from top to bottom—as is traditional
in Chinese and Japanese, and making collapsing margins dependent on the direction of the content. The rules
remain unchanged for horizontal text—adjacent vertical margins collapse, while horizontal ones are preserved. For
vertical text, the rules are reversed.
Note
Isn't There an Easier Box Model?
You're not alone if you think that the CSS box model is counterintuitive. Surely it would be much easier to
calculate width and height from the outer edge of one border to the outside of the opposite border? In other
words, include padding and borders in the overall dimensions. In fact, that's how Internet Explorer interpreted
the CSS specification when it first supported CSS. However, the web standards community generally agreed that
IE's version of the box model was wrong. All other browsers implemented the box model as described in
Figure
6-1
, and Microsoft fell in line when it released IE 6 in 2001.
So, for more than a decade, web designers have grown accustomed to calculating width and height by
deducting the dimensions of padding and borders. But CSS3 offers a way of turning back the clock to the original
Microsoft box model using the
box-sizing
property, which accepts the values listed in Table
6-5
.
Table 6-5.
Values Accepted by the box-sizing Property
Value
Description
content-box
Width and height apply only to the content box (see Figure
6-1
). This is the default.
padding-box
*
Width and height include both content and padding.
border-box
Width and height include content, padding, and borders.
* This value might be dropped from the final specification.
Because
content-box
results in the standard box model described at the beginning of this chapter, and
padding-box
might be dropped from the final specification,
border-box
is the only value of interest. Setting
box-sizing
to
border-box
makes width and height calculations more intuitive by including padding and
borders, as shown in Figure
6-6
.
margin
border
padding
width
content
height
Figure 6-6.
Setting box-sizing to border-box changes the way width and height are calculated
