Unexpected resulting box height

Question

I'm setting:

font-size: 13.44px
line-height: 1.4881

Multiplying those, gives us 20.000064

But the rendered/calculated height of the box is 19px

Why?

http://jsbin.com/vokesukeye/2/edit?html,output

Answer 1

The font-size seems to be rounded up or down for this calculation.

When I increase your CSS font-size to 13.6px (via Chrome's "Inspect" function), the text container height was increased from 19px to 20px.

You may want to try to use "Inspect" with your browser and interactively adjust these CSS settings to determine your CSS settings.

Answer 2

As I wrote in my comment earlier: The pixel values are being rounded, first to font-size 13px and then the result to 19px, due to the nature of pixels (which are a whole pixel or no pixel, except possibly on retina displays)