Question

I’m having trouble figuring out why inline elements ignore line-height in some browsers (Chrome and Firefox ignore it, but IE9 does not).

Here is an example:

<small style="line-height: 1; font-size: 26px;">Hello, World</small>

The expected result is for the element height to be 26px, however, it’s being set to 31px. If I set the element’s display to block, the height is correctly set to 26px.

Everything I read says it’s supposed to be set to the line height, so I can’t figure this one out. Here is what I read on W3C:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their ‘line-height’.

Source: http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 1

What webkit inspector shows (and what you measured in PhotoShop) is the content area‘s dimensions.

See http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

The height of the content area [of inline elements] should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font…

Different browsers simply use a different approach here. See http://jsfiddle.net/ejqTD/1/ for an illustration of that. Note how webkit renders a higher content area, but line-height is still correct.

The content area exceeds the line box in this case, which is permitted: http://www.w3.org/TR/CSS2/visudet.html#leading

if the height specified by ‘line-height’ is less than the content height of contained boxes, backgrounds and colors of padding and borders may “bleed” into adjoining line boxes.

It’s easy to see if you consider line-heights < 1: http://jsfiddle.net/KKMmK/