Web Design in a Nutshell, 3rd Edition

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