204 Chapter 16
Although the standard model is more logical, at times the IE model is
more convenient to use. In CSS3, you can opt to use the IE model with the
box-sizing property, which is described in the CSS3 Basic User Interface
Module (http://www.w3.org/TR/css3-ui/). The syntax is as follows:E { box-sizing: keyword; }The default keyword is content-box, which means apply the specified
width or height to the content box only, as in the W3C model. In contrast, the
alternative value border-box means any specified length should also include
any padding and border boxes.
Figure 16-1 shows the difference. The top example uses the W3C box
model, whereas the bottom one has the border-box value applied. As you can
see, the total width of the lower example is equal to the content box of the
upper.Figure 16-1: Comparing values for box-sizing: the
default content-box (top) and border-box (bottom)noTe Some people prefer to set a global style rule to apply border-box to all elements. I prefer
to apply the rule only as required.ValueS and Sizing
One challenge in web layout is that elements are ignorant of their content
and the context in which they’re used—in other words, without JavaScript,
an element is not aware of the dimensions of its child or parent elements.
CSS3 introduces a new concept that changes that equation a bit with the
addition of intrinsic and extrinsic sizing. Intrinsic sizing is based on an ele-
ment’s children, and extrinsic sizing is based on the size of the parent ele-
ment. These sizing models are defined in the CSS3 Intrinsic & Extrinsic
Sizing Module (http://dev.w3.org/csswg/css-sizing/).