CODEWITHSUNDEEP
css
Daniel Birowsky Popeski
Daniel Birowsky Popeski

Reputation: 9286

Unexpected resulting box height

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

Upvotes: 6

Views: 117

Answers (2)

Johannes
Johannes

Reputation: 67778

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)

Upvotes: 1

JohnH
JohnH

Reputation: 2133

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.

enter image description here

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

Upvotes: 4

Related Questions