TIPS - CSS: Professional Techniques for Modern Layout - page 75

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
written:

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>

77

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.