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:
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.
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.
Related: line-height, font-size, inline elements
CSS tests home