In the all the below test cases there are couples of (floated) yellow blocks with different line-heights, and with the second block of each couple containing a span with a smaller font-size.

In standard browsers, when the line height is specified in px or em the second block is higher than the first one. The reason (uhm, not so sure) is that the inner span:

• inherits the same (absolute) computed line-height from the parent block
• has a smaller content height than the other text, so it has bigger leading
• is positioned with the same baseline as the other text, so its bigger half-leading below its content area makes the whole block's height bigger (the baseline is usually lower than the middle vertical point of the content area)

When the line height is specified as a pure number the above effect doesn't occur because the inner span inherits a line-height expressed again as a pure number, so its height is smaller than the other inline boxes' height and do not extend the whole block.

line-height: 96px

line-height: 1.5em

line-height: 1.5

The below test cases are similar to the above ones, but here the inner span has display: block. Now there is no height difference between the two boxes of each couple when the line-height is expressed in px or em, there is difference when it is expressed as a pure number.

line-height: 96px

line-height: 1.5em

line-height: 1.5

Related: line-height, font-size, inline elements

CSS tests home