-3

I'm testing about set root font size to 62.5% then use rem for child element font size.

When I setup a div's font size to 1rem, then I suppose the result should be 16 *0.625 *1=10. But the actual result is 12px. Then I setup another div which is 2rem, the result the 20px which match with the equation 16 *0.625 *2 =20

I add a div with actual 10px too, but the result also 12px

Here is my playground setup: https://playcode.io/1200950

Can someone explain why the 1rem div isn't 10px?

Suspended
  • 169
  • 2
  • 11
  • Your calculations and code are correct. Both `.test-10px` and `.test-1rem` have the exact same size in your playcode: `10px`. How are you measuring `font-size` and what makes you believe they have different values? Tip: if using Chrome, the easiest way to inspect the actual `font-size` in `px` is to go to the *"Computed"* style tab. – tao Feb 17 '23 at 13:32

2 Answers2

2

With your current setup it's actually 10px, I added a 12px example to compare. I don't know from where are you measuring but here is a good explanation of how it works. Hope it helps.

Example

Font size well display on Chrome dev tools:

Font size

Franco Gabriel
  • 548
  • 3
  • 9
-1

enter image description here

Seems the font size displaying is 10px indeed but the dev tool misleading me. I will take this as the answer.

Suspended
  • 169
  • 2
  • 11
  • If it is displays a value larger than 10px, or whatever you set your font-size - it might be due to line-height. It's not unusual to have 1.1, 1.2 as line-height. It's why there is vertical-space between two lines of text. – F. Müller Feb 22 '23 at 20:09