Lines and leading

line-height and the leading model

line-height sets the distance from baseline to baseline. The part of it that exceeds the natural size of a line (ascenders plus descenders) is the leading, and there are two schools on where it belongs:

• CSS half-leading (-bag-leading-model: half, the default): half of the leading sits above the line box, half below it, as CSS 2.1 §10.8.1 specifies. The first baseline of a block moves down by half a leading, and the last line keeps half a leading below its descenders.
• The TeX model (-bag-leading-model: trailing): the line keeps its natural size and all of the leading goes below it, as an inter-line gap. First and last baselines hug the block edges.

The screenshot shows both models with the hboxes trace switched on: under half every line box is inflated to the full line-height, under trailing the boxes stay at their natural size and the leading is visible as the gap between them. Baseline-to-baseline distances are identical in both models; what changes is where a paragraph starts and ends relative to its first and last baseline, which is what margins and page breaks work with.

The property is inherited, so it can be flipped for the whole document on body or for a single element:

body { -bag-leading-model: trailing; }  /* TeX rhythm everywhere */

Use trailing when reproducing documents whose reference output comes from TeX, or when the first baseline must sit exactly at the top of the text block (a common layout convention in print).

Subscripts and superscripts

<sub> and <sup> shift to the proper script position of the parent box: the offset is computed from the parent’s font size, not from the (usually reduced) script size, so nested or shrunken scripts do not collapse onto the baseline. The offsets follow common browser practice: superscripts rise by 1/3 of the parent em, subscripts drop by 1/5.

For manual control, vertical-align accepts lengths and percentages (of the element’s line-height), positive values raise, negative values drop:

.raise { vertical-align: 0.6em; font-size: 70%; }
.drop  { vertical-align: -30%;  font-size: 70%; }

Shifts add up across nesting levels, so a <sup> inside a shifted span keeps its relative position.

Whitespace and tabs

white-space controls both wrapping and space collapsing, with the CSS values normal, nowrap, pre, pre-wrap and pre-line. In the preserving modes the space keeps the width of the font’s space glyph, so ASCII art and aligned code line up column for column, and tab-size (default 8) sets the tab stops:

pre { white-space: pre; tab-size: 4; }