In the below test case a div with
font-size: 2em contains a span with
font-size: 0.5em (aqua background). As a result the text in the span has the same size than in the body.
The same does not happen to the line-height: the div has a 'normal' line-height based on a 2em font size, and this still acts as minimum height for the line boxes in the div, even if all its "real" inline boxes have a smaller height: it is like if the div contained directly some text, even if this is not the case. See line height calculations, in particular:
On a block-level, table-cell, table-caption or inline-block element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").
The above is true in all browsers except IE7-.
In transitional (almost standards) and quirks mode the line-height of the div is ignored, the height of the line boxes is the 'normal' line-height based on the font size of the span.
This is somewhat similar to the fact that in transitional and quirks mode a block containing only an image has just the height of the image, while in standards mode it behaves as if some text were present, with the text properties in effect on the block itself.
If the span has display block, the line-height of the div is ignored, since the following part of the above quotation is no more true:
block-level … element whose content is composed of inline-level elements.
Like the first case, but with white space between div and span tags. Makes a difference in IE7- only where the last line gets a double line-height.
This page in standards mode line-height, block elements - Standards, in transitional mode line-height, block elements - Transitional
Related: line-height measurement units and inheritance
CSS tests home