HTML font-size: 62.5% is way larger than it should be
Hello, I'm running into a problem where I want to use rems as a unit, so I set the html font-size to 62.5%, which I've seen as a common practice, which should give me 1rem = 10px (because the default font-size should be 16px). But, when I go to use these newly set rems the styles on the page using them are larger than what they should be. For instance, I set a margin bottom to 8rem expecting 80px but on the page its displayed as 120px, despite me inspecting it with dev tools and it saying its using 8rem. I'm just so confused what could be making these rem larger than 10px / rem. I'm using Chrome if that matters. Any ideas? I know this is common practice.
https://myip.kim/ https://birthdaywishes.onl/ https://elecpay.in/tneb/
Once you get used to thinking in rems, you'll find that it's actually quite easy to express familiar powers of two as fractions of 16, the root font size of every browser. But if you need to express any other value in rems—like odd numbers or very large numbers—you'll need to do the math by hand, convert it with CSS calc, or use a preprocessor like Sass. Alternatively, you can make your life easier using a trick with a root font size of 62.5%.