Cascading Style Sheets: The Definitive Guide, Second Edition

Vertical Alignment

Now that we’ve covered horizontal alignment, let’s move on to vertical alignment. Since the construction of lines is covered in much more detail in Chapter 7, I’ll just stick to a quick overview here.

The Height of Lines

The property line-height refers to the distance between the baselines of lines of text rather than the size of the font, and it determines the amount by which the height of each element’s box is increased or decreased. In the simplest cases, specifying line-height is a way to increase (or decrease) the vertical space between lines of text, but this is a misleadingly simple way of looking at how line-height works. line-height controls the leading, which is the extra space between lines of text above and beyond the font’s size. In other words, the difference between the value of line-height and the size of the font is the leading.

line-height

Values

<length> | <percentage> | <number> | normal | inherit

Initial value

normal

Applies to

all elements (but see text regarding replaced and block-level elements)

Inherited

yes

Percentages

relative to the font size of the element

Computed value

for length and percentage values, the absolute value; otherwise, as specified

When applied to a block-level element, line-height defines the minimum distance between text baselines within that element. Note that it defines a minimum, not an absolute value, and baselines of text can wind up being pushed further apart than the value of line-height. For replaced elements, ...