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.
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, ...
Get Cascading Style Sheets: The Definitive Guide, Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.