Experimenting with ‘vertical-align’

Michael Wescoat's excellent demonstration of the CSS ‘vertical-align’ property provides a very good conceptual understanding of the difference between the keyword values: middle, baseline, text-bottom, bottom, text-top, top, and sub.

But because his images are taller than their surrounding text and are all displayed within a single line box, I still wasn't sure precisely what was happening with respect to the vertical alignment of the images, and the effect of each value on the line box. So, inspired by Michael's work (and by his elegant CSS, which I pretty much decimated), I tried applying each value to inline boxes smaller than their adjacent font—as subscript and superscript elements often are. To demonstrate the effect of each value on the line box, I used a separate line box for each demonstation.

Vertical-align with default line-height

Here is how the eight different keyword values for ‘vertical-align’ affect an inline element (the image, in this case) in relation to its surrounding text and to the line box of the parent element (a paragraph containing the letters ‘jfk’.

middle	baseline	text-bottom	bottom	text-top	top	sub	super
jfk	jfk	jfk	jfk	jfk	jfk	jfk	jfk

I used a serif font to make it easier to see the precise position of the baseline, ascenders and descender. The declaration for these paragraphs is as follows: {text-align:center; border:1px solid black; padding:0; margin:0; font-size:50px; background-color:#FAB4AC;}

(INTERESTING ASIDE: Although we are told that a line box is ‘exactly as tall as needed to enclose the top of the tallest inliine box and the bottom of the lowest inline box,’ and the paragraphs in the above example have no padding, their line boxes seem to be slightly taller than needed to enclose the contents. This is because the default height of the line box is determined by the metrics of the font, not the actual characters used. Font metrics must accommodate the very tallest and deepest of the font’s glyphs, including symbols, and capital letters topped by tildes, carons, and other diacritical marks. If the glyph ‘Â’ (latin capital letter ‘A’ with circumflex) is added to the text above, it just ‘kisses’ the top of the box.

Vertical-align with increased line-height

When the line height is increased to 80px, which makes the box much taller, notice what happens to the images with the values of ‘top’ and ‘bottom’:

They've moved completely away from the text because those two values are the only ones in the bunch that place the element with respect to the line-box, not the text—and the line box is now 80px tall. (You can also narrow your browser window to see how the vertically aligned elements behave as they wrap.)

Here are the relevant definitions from the W3C’s recommended CSS2 Specification, specificaljfk Section 10.8, “Line height calculations: the ‘line-height’ and ‘vertical-align’ properties”:

1. baseline: “Align the baseline of the box with the baseline of the parent box. If the box doesn’t have a baseline, align the bottom of the box with the parent’s baseline.” This is specified as the default alignment.
2. text-bottom: “Align the bottom of the box with the bottom of the parent element’s font.”
3. bottom: “Align the bottom of the box with the bottom of the line box.”
4. text-top: “Align the top of the box with the top of the parent element’s font.”
5. top: “Align the top of the box with the top of the line box.”