Values and Sizing 207
As you know, however, an element’s “real” width also includes padding
and border, so, in this case, the p element would overflow its parent. One
solution is to use the box-sizing property (see “Box Sizing” on page 203),
but you may have good reasons for keeping the standard box model, so a
better alternative is to use intrinsic sizing:
p { width: fill; }
The result is shown in Figure 16-4; the inline-block element, with bor-
der and padding, is resized to fill the available space in its parent.
Figure 16-4: Using the fill value for width makes the inline-block caption
shown here fill the available width of its parent.
Summary
In this chapter, I’ve discussed value units that are relative to a root font size
and the viewport, dynamic calculations of values, and CSS3 ways to size
elements based on their content and context. I’ve also discussed the CSS3
switch to a different box model.
Although units and sizing methods may seem like an unglamorous
aspect of CSS, they offer you fine-grained control over your layouts, which
is always welcome. Because websites are viewed on such a variety of different
devices, for an element to be aware of its viewport, content, and context, so
it presents content in the most appropriate way, is extremely valuable.
