Do REMs always come from font-size in html?

Question

Let's say I have:

html {
  font-size: 20px;
  padding: 8px;
}

div {
  font-size: 0.5rem;
  padding: 0.5rem;
}

Will the padding in the div then be 4px (so from padding in html{}) or 10px (form font-size in html{})?

Answer 1

The CSS Values and Unites Module Level 3 states:

rem unit

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

You can try this yourself by inspecting your div element and looking at the computed values:

html {
  font-size: 20px;
  padding: 8px;
}

div {
  font-size: 0.5rem;
  padding: 0.5rem;
}

<div>Hello, world!</div>

So yes, as we can see, the padding has been computed at 10px - half the font-size.