The Line-Height Property
| The line-height property specifies how far apart the lines in a paragraph are. Or more precisely, it specifies the minimum distance between the baselines of the adjacent lines. Figure 7.4 shows schematically what the line-height specifies. Figure 7.4. What the line-height property measures. The added space in addition to the font size is often called the leading. In CSS, half of the leading is inserted above the text and half of it below.
This property has three values:
The length value is either an absolute value (e.g. 1cm, 0.5in, 15mm, 20pt, 2.3pc) or a relative value (e.g. 1.2em). A common absolute value for line-height is 12pt for a 10pt font. The number and percentage values, as well as a length value with an em unit, operate similarly to each other, with an important difference. In principle, all three are interpreted as relative to the font size; if we assume a font size of 10pt, a line height of 1.2 means the line height is set to 12pt (1.2 times the font size). A percentage value works similarly: If the value is set to 120%, the resulting line height of a 10pt font is again 12pt (120% x 10pt). In the same manner, a value of 1.2em means 1.2 x 10 = 12pt. However, they differ in how they handle inheritance. A line height specified as a number is computed for the parent and for each child. The line height corresponding to the percentage and the em is computed once and the result is inherited by all children. (This is true for all properties that allow a percentage or em unit as the value.) Of the three methods for calculating the value, the number method is preferred.
Figure 7.5(a) shows the effect of using the percentage value. Figure 7.5(b) shows the effect on the same text using the number value. In (a), the paragraph has a line height of 120% times the font size of the body (10pt), which computes to a line height of 12pt. The quote is printed in a smaller font, but the line height is not changed. The value of 12pt is inherited, which may be what the author wanted, but then again, it may not be. In Figure 7.5(b), the paragraph has a line height of 1.2 times its own font size, which again computes to 12pt. The quote is printed in a smaller font, but this time, the line height is changed with it because the line height is inherited as a factor, not as a fixed size. Figure 7.5. (a) The effect of setting the line-height of the body with a percentage; (b) setting the same line-height, but with a number. <STYLE> BODY { font-size: 10pt; line-height: 120% } BLOCKQUOTE { font-size: 8pt } </STYLE> <BODY> <P>This paragraph has a line height of 120% times the font size of the body (10pt), which computes to a line height of 12pt. <BLOCKQUOTE> <P>This quote is printed in a smaller font, but the line height is not changed. The value of 12pt is inherited, which may be what the designer wanted, but then again, it may not be. </BLOCKQUOTE> </BODY> and <STYLE> BODY { font-size: 10pt; line-height: 1.2 } BLOCKQUOTE { font-size: 8pt } </STYLE> <BODY> <P>This paragraph has a line height of 1.2 times its own font size, which again computes to 12pt. <BLOCKQUOTE> <P>This quote is printed in a smaller font, but this time the line height is changed with it, since the line height is inherited as a factor, not as a fixed size. This looks better, doesn't it? </BLOCKQUOTE> </BODY> |
EAN: 2147483647
Pages: 215