Styling Text - Beginning CSS3 - page 62

text-bottom Align the bottom of the imaginary text box with the bottom of the text in
the parent element.
top Align the top of the imaginary text box in line with the top of the parent's text box.
bottom Align the bottom of the imaginary text box in line with the bottom of the
parent's text box.
inherit Vertical alignment is not inherited by default, so use this to apply the same
value as the parent element.

You can also use a length or percentage. Both align the bottom of the imaginary text box by the given amount
above the bottom of the parent's text box, or below it if a negative value is used. A percentage value is calculated
as a proportion of the current line height.

■ The vertical-align property also controls the vertical alignment of inline blocks and the content in table
cells. inline blocks are covered in Chapter 6 , and styling tables is the subject of Chapter 14.

Note

Drawing Lines Under, Above, and Through Text
he text-decoration property controls underlining, strike-throughs, and lines above text. One of its most
common uses is to remove the underline from unvisited and visted links. In CSS3, some useful options have been
added, such as setting the color and style of the line. But let's start with the way it works in CSS2.1. The text-
decoration property accepts the following values:
none Remove underlines or cancel any inherited text-decoration rules.
underline Underline the text.
overline Add a line above the text.
line-through Add a line through the center of the text.
blink Flash the text on and off . Browsers are not required to support this, and this
value has been removed from CSS3.
inherit This property is not inherited, so use this to apply the same value as the
parent element.
You can use a space-separated list to sandwich text with lines above and below by using both underline and
overline in the same style declaration like this:
text-decoration: underline overline;
Setting the value to line-through has the effect of striking out text. It's the recommended replacement for
the deprecated <s> and <strike> HTML tags. In fact, you can go the whole hog and use all three types of lines in
the same declaration. Figure 4-9 shows the effect of each type of line.