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.
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
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.
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 .
Figure 6-6. Setting box-sizing to border-box changes the way width and height are calculated
Search WWH ::

Custom Search