11

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

user123444555621
  • 148,182
  • 27
  • 114
  • 126
harryfino
  • 455
  • 1
  • 5
  • 13
  • A quick test shows that the span does have a computed `line-height` of 26px in Firefox. How did you test? – Mr Lister Mar 07 '12 at 21:24
  • I can't find a way to make this not work... http://jsfiddle.net/RnDDQ/ – animuson Mar 07 '12 at 21:26
  • I added a 1px border to show the physical size of the element. Then I opened up Photoshop and measured pixels. Firefox and Chrome show the appropriate line height, but the element's height is bigger. In Chrome, you don't need the border... just the dev tools to highlight the element. – harryfino Mar 07 '12 at 21:28
  • 1
    @animuson In your jsfiddle example, Chrome shows the height of the small as 29px, instead of 26px. – harryfino Mar 07 '12 at 21:31
  • @iambriansreed My question, if that is what you're asking, is why inline elements ignore line-height in some browsers. I'm wondering if it's a bug, or if there is something I'm missing in the definition of how the height is computed. – harryfino Mar 07 '12 at 21:33
  • 1
    This is from 2000, and yet is still so very interesting... David Baron's explanation of inline height and line-height: http://dbaron.org/css/2000/01/dibm-20000113 – stommepoes Mar 07 '12 at 21:42
  • @harryfino Yes, I see it now. The `` does have a height of 29px in Firefox. But if I put it in a `
    `, the div only grows to 26px in height, and doesn't seem to be bothered by the fact that the `` is higher. Very odd.
     – Mr Lister Mar 07 '12 at 21:46
  • Note that there is no API for directly determining the height of an inline box. All you get is `offsetHeight`, or the `height` style attribute (which despite its name tells nothing about the computed height; see http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced: "The 'height' property does not apply"). – user123444555621 Mar 08 '12 at 07:03

1 Answers1

5

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/

user123444555621
  • 148,182
  • 27
  • 114
  • 126
  • Do you also know how the `line-height` affects `inline-block` and maybe even `flex` elements? – mb21 Aug 19 '14 at 12:27