6

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

13
  • 3
    probably it's being rounded, first to font-size 13px and then the result to 19px
    – Johannes
    Nov 5, 2016 at 15:18
  • That should be highly unlikely since font size 13.1px is rendered obviously smaller than 13.4px It means that browsers are not throwing away the decimals while rendering. Nov 5, 2016 at 15:24
  • Check out the difference between 13.4px and 13.5px in the font-size (resulting 19px and 20px respectively), it is highly probable, that it is rounded on the way Nov 5, 2016 at 15:27
  • @AdamWolski I am really confused. Why would the browser round the font size? Nov 5, 2016 at 15:31
  • 1
    @Birowsky Not here actually. If I add another div to the JSBin with a font size of 13.1px, the results are identical. See screenshot. Which exact browser and OS are you testing on?
    – Mr Lister
    Nov 5, 2016 at 15:37

2 Answers 2

4

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.

1

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)

1
  • Even on Retina (and other high-DPI displays), when every virtual pixel is 2x2 real pixels, virtual pixels are treated as binary: either "present" or not. Box shadow might make an exception, but it's not directly controllable by style rules.
    – rishat
    Nov 6, 2016 at 22:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.