Prev | Current Page 123 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

Figure 3.21 shows the four
possible text-align values in action.
FIGURE 3.21 The four text-align
values as shown in Firefox for Mac.
STYLIN??™ WITH CSS - CHAPTER 3 92
Line-Height Property
Example: p {line-height:1.5;}
Values: any numerical value (no value type is needed)
line-height is the CSS equivalent of leading (pronounced like the
metal) in the world of print. Leading creates space between the lines
of a block of text. Leading is de?¬? ned not as the height of the space
between the lines, but as the distance between the baseline of one
line and the next. For the sake of readability, leading is greater than
the height of the type so that there is space between the lines. By
default, browsers set leading proportionately to the font size??”typically
at 118 percent of the font size, according to my tests??”so there
is always consistent space between the lines no matter what the
font size.
FIGURE 3.22 A variation of the standard
line height is a simple way to
give a distinctive look to your site.
As shown in Figure 3.22 above, the simplest way to change this
default leading is to use the font: shorthand property and write
a compound value for both font size and line height in one. For
example:
div#intro {font:1.2em/1.4;}
In this case, the leading is 1.4 times the font size of 1.2 ems. Note
that you don??™t need any units, such as ems or pixels, speci?¬? ed for
the line-height part of the value, just a number.


Pages:
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135