Ems to Pixel Conversion - Why 62.5% and not 6.25%?

Question

I know that a lot of us are familiar with setting the font size on the body element in our CSS to 62.5%. This means that 1em will equal 10px and helps for keeping things pixel p

Answer 1

I tried to do the same thing, but ran into an issue of using rems for margins and paddings. Setting font-size to 62.5% avoids these issues.

For example, the following CSS

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

renders as:

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

Strange, right? I'm assuming this is caused by some odd conflict with minimum font sizes.

---

Now, if you use font-size: 62.5% on the other hand, things render as expected:

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

renders as:

p {
  font-size: 1px;
  margin:    1px;
}