Graphics Programs Reference
In-Depth Information
h e ul element has its line-height computed to be 15px because for line-height ,
em-based values are calculated using the computed font-size of the element itself, the
same as percentage values. Since I declared the font-size directly, we know its computed
size in pixels.
Here's the potentially surprising part: h e computed value of 15px is what's passed on to the
descendent elements. In other words, the li and small elements will inherit a line-
height value of 15px . End of story. h ey don't change it based on their own font sizes; in
fact, they don't change it at all. h ey just take that 15px and use it, exactly the same as if I'd
ul { font-size : 15px ; line-height : 1em ;}
li { font-size : 10px ; line-height : 15px ;}
small { font-size : 80% ; line-height : 15px ;}
Okay, now suppose I take the em of that line-height value, so that the styles now read:
ul { font-size : 15px ; line-height : 1 ;}
li { font-size : 10px ;}
small { font-size : 80% ;}
< ul>
< li>I'm a list item with < small>small text< / small>.< / li>
</ ul>
Now what's passed on to the descendants (the li and small elements) is that raw number,
which is used by said descendant elements as a scaling factor—a multiplier, if you will—and
not the computed result.
h us all elements that inherit that value of 1 will take that value and multiply it with their
computed f ont-size s. h e list item, with its declared font-size: 10px , will have a
computed line-height of 10px . h en it will pass that 1 on to the small element, which
will multiply it with its computed font-size . h at's 8 pixels; therefore, its computed
line-height will also be 8 pixels.
h e end result is exactly the same as if I'd written:
ul { font-size : 15px ; line-height : 1 ;}
li { font-size : 10px ; line-height : 10px ;}
small { font-size : 80% ; line-height : 8px ;}
h at's a pretty major dif erence (see Figure 3-3). h is is why it's always strongly recommended
that you use unitless numbers if you're going to set a line-height on something like the
html or body elements, or indeed on any element that is going to have descendant elements.
Search WWH ::

Custom Search