CSS Line-Height Units - Mystery Revealed!
One of the more mysterious issues when using style sheets in web page design occurs when you apply "line-height" values to text. We have seen a lot of designers try and use all kinds of units for line-height, each with mixed and often mysterious results. Maybe this will help explain the problem...first look at the effects of line-height values in the text below:
Something very interesting is going on (in Internet Explorer and Firefox). Notice that in the first two cases, the line height numerical value stayed the same, but as the font-size value increased, line-height spacing in the text increased relative to the font-size of the text! The browser, in the case of numerical or decimal line-height values, calculates the line-height using the font size. Actually, that is the way its supposed to work. Now take the third case. In that case, we are testing inheritance of the line-height value. Notice though, what you would expect to happen, does not happen. In the Test #3 case, we have a div wrapped around an inner div with text. The outer div uses a 100% font-size, but has line-height of 2, or twice a big. If we had put text in there, it would be the size of #1, but height calculated based on #2, or line-height:2. In the inner div we override the parents font-size, setting it to 120%, but leave line-height out. The child div inherits the parent line-height, as expected, but then overrides the parent with its font-size. Combining the two, the Test #3 inner text should now be the SAME line-height and font-size as Test #2. But it is not! It appears the the font-size is right, but the line-height is smaller than expected. Its actually the height if you had applied line-height:2 to font-size:100%, not 120%. Why? It appears the line-height is inherited, but calculated based on the parents calculated value, and is NOT recalculated based on changes in the child's font-size! This is why its important to understand line-height, and learn to use it correctly.
In summary, line-height is not an absolute value, but is calculated based on a parent, then inherited by children, regradless of their font-size. We recommend you always use a numerical value, like "line-height:1.2;". This allows your text to scale in size and line-height as the user scales the text in their browser. But be careful! Remember that line-height values in text is inherited but not recalculated. In other words, numerical values for line-height are not only calculated based on the parent, but are then inherited and applied to whatever font-size a child has given itself. For this reason, if you shift font-size, you should always apply a line-height, too, or leave both off, in our opinion, when styling text.
Looking for great standards-based Website Products for your website? Get GiantIsland Web Products!