css - REM 总是来自 html 中的字体大小吗？

Question

假设我有:

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

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

div 中的内边距是 4px(因此来自 html{} 中的 padding)还是 10px(形成 font-size in html{})?

Answer 1

CSS Values and Unites Module Level 3状态:

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.

您可以通过检查您的 div 元素并查看计算值来自己尝试:

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

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

<div>Hello, world!</div>

是的，正如我们所见，padding 已计算为 10px - font-size 的一半。