Aligning relative to the baseline
Many of the vertical-align
values move inline elements
with respect to the baseline of the surrounding text. The default
value is baseline
, which aligns the
baseline of text—or the bottom edge of a replaced element—with the
baseline of the parent element.
The sub
and super
values allow subscripting and
superscripting. The sub
value
causes the element to be lowered relative to the baseline. super
causes the element to be raised
relative to the baseline. CSS does not prescribe the distance it
should be raised or lowered, so it depends on the browser. It is
significant to note that aligning an element with sub
or super
does not reduce
the font size of the element.
These examples of baseline
,
sub
, and super
are shown in Figure 18-15.
<p>Aliquam erat <span style="vertical-align: baseline">volutpat</span></p> <p>Aliquam erat <span style="vertical-align: sub">volutpat</span></p> <p>Aliquam erat <span style="vertical-align: sup">volutpat</span></p>
Figure 18-15. vertical-align relative to baseline
Get Web Design in a Nutshell, 3rd 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.