CODEWITHSUNDEEP
css
user663031
user663031

Reputation:

Why would height specified as 1.0em be slightly less than font-size instead of equal?

Consider the following display from the Chrome debugger showing the styles on an element:

font-size: 18px;
height: 17.600000381469727px;
    .a, .h, .r - 1.0em
left: 52.80000305175781px;
line-height: 17.600000381469727px;
    .a, .h, .r - 1.0em

My understanding is that since height is specified as 1.0em, then its value in pixels should precisely equal to the font-size; instead it's 0.4 pixels smaller for some reason. There are no effects of padding or margin.

The confusing thing is that in an earlier version things were working fine:

font-size: 18px;
height: 18px;
    .stone, .iw-capture - 1em
line-height: 18px;
    .stone, .mark, .iw-capture - 1.0em

So there's nothing fundamentally wrong with the browser's ability to do math. However, I can't figure out what changed to result in the odd behavior, or for that matter why anything changing should have an effect on this.

Any thoughts on why this could be happening or what I'm missing?

Upvotes: 1

Views: 390

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47667

The formula to calculate the em is

1 ÷ parent font size (px) × required pixels = em equivalent

As you can see dividing 1 by 18 in your case will give you a very long float which later is being multiplied by 18 - and it won't give you the exact same integer. That's the browser's math engine..

Upvotes: 2

Inkbug
Inkbug

Reputation: 1692

It looks like it is using for some reason the line-height of the element.

Upvotes: 0

Related Questions