line-height - 1This page tests the inline formatting model (inline boxes, line
boxes, and so on) in the ways that it affects line-height.
See CSS2, section 10.8.1.
font-size, line-height, vertical
align, inline styles and classes.The following paragraph contains various sizes of text. However,
because the line-height is set numerically, there should
be no overlap of text.
For each line, the line height should be the line-height of the biggest element on the line.
.example { font-size: 10px; }
.one { line-height: 1.3; }
Calculated line height here should be 13 pixels. 250%: Calculated line height here should be about 33 pixels. Calculated line height here should be 13 pixels. 350%: Calculated line height here should be about 46 pixels. Calculated line height here should be 13 pixels. 50%: Calculated line height here should be about 7 pixels. Calculated line height here should be 13 pixels. 200%: Calculated line height here should be about 26 pixels. Calculated line height here should be 13 pixels.
Once again: there should be no overlap in the text above.
The following paragraph contains two sizes of text. However,
because the line-height is set by using
percentages, the height of every line should be
exactly the same, that is, 13px. Note that the large text has
it's style specified inline, using the style
attribute.
.example { font-size: 10px; }
.two { line-height: 130%; }
/* Set by style attribute: */
#big { font-size: 300%; vertical-align: bottom; }
Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. (should not affect line height) Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels. Calculated line height here should be 13 pixels.
The following paragraph is the same as the previous test, but with a considerably bigger font-size as a base. This makes it easier to remove the possibility of rounding errors.
Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. (no effect) Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels. Line height here should be 50 pixels.
Bugzilla: Bug 1990 (fixed), Bug 4233
Last updated in January 1999.