You??™ll
learn more about the line-height
property in the ???Text Properties??? section
next.
STYLIN??™ FONTS AND TEXT 85
There are eight text-related CSS properties:
??? text-indent
??? letter-spacing
??? word-spacing
??? text-decoration
??? text-align
??? line-height
??? text-transform
??? vertical-align
Meet the Text Snake
A very important concept about how CSS manages text is that CSS puts a box around the text inside an element. For
example, if you put a block of text in a paragraph p element, CSS sees the actual text as a long skinny line of text in a
box, even if it gets broken across multiple lines in order to ?¬? t in the container. To make this clear, in Figure 3.14, the border
of the containing element (the paragraph) is in red, and the border of the text box is in green.
FIGURE 3.14 Text is contained
within a long, skinny box that
is often broken across multiple
lines.
In this example, I marked up the text like this
This is a long paragraph??¦(etc.)
and applied the following styles
p {border:2px solid red;}
span {border:2px solid green;}
Note that the text box is broken across the lines and is only closed at the beginning of the ?¬? rst line and the end of the
last line.
Knowing this can help you get things looking the way you want faster. For example, if you want to indent the ?¬? rst line of
a paragraph, you can use the text property text-indent, as I did in Figure 3.
Pages:
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128