2

An inline-block span element with a line-height of 20.16px (14.4pt font-size * 1.4 line-height) has a height of 19px on Chrome.

An inline-block span element with a line-height of 20.16px (20.16px line-height) has a height of 20px on Chrome.

The element inspector gives an identical line-height for both elements, but explicitly setting the line-height changes the element's height. Try the fiddle to see what's happening:

span {
  font-size: 14.4px;
  line-height: 1.4;
  /* line-height = 20.16px; 14.4 * 1.4 */
  display: inline-block;
}

span.explicit {
  line-height: 20.16px;
}
<span>line-height of 20.16px has a height of 19px!!</span>
<br />
<span class="explicit">line-height of 20.16px has a height of 20px</span>
<br />
<br />
<strong>Use inspect element to examine the two span's differing height</strong>

Question is: Why is this happening?

apscience
  • 7,033
  • 11
  • 55
  • 89

1 Answers1

3

using 14.4px is exactly the same as using 14px

so 14pxx1.4 = 19.6px

I tested in both FF and Chrome, and in Firefox they round up to 20px, but Chrome for some reason just ignore the decimal and stay with 19px

See relevant SO Question

span {
  font-size: 14px;
  line-height: 1.4;
  /* line-height = 19.6px; 14 * 1.4 */
  display: inline-block;
}

span.explicit {
  line-height: 19.6px;
}
<span>line-height of 19.6px has a height of 19px!!</span>
<br />
<span class="explicit">line-height of 19.6px has a height of 20px</span>
<br />
<br />
<strong>Use inspect element to examine the two span's differing height</strong>

Firefox ScreenShots:

enter image description here

Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Technically, Firefox also rounds `14px`x`1.4` down BUT it rounds `19.6px` up. You can see the question's example: Both elements are `19px` in both Firefox and Chrome. – apscience Feb 11 '16 at 03:57
  • Also, in Inspect Element, it appears as `20.16px`. So this seems to be a discrepancy between Inspect Element and the browser's actual DOM metrics. – apscience Feb 11 '16 at 03:59
  • See updated answer with Firefox Screenshots, both outputs with `height:20px` – dippas Feb 11 '16 at 04:10