REM总是来自html中的font-size？

Question

让我说我有：

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

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

然后div中的填充是4px（因此padding中的html{}）还是10px（font-size中的html{}形式）？

Answer 1

CSS Values and Unites Module Level 3州：

  

rem unit

     

等于根元素上font-size的计算值。在根元素的font-size属性上指定时，rem单位引用属性的初始值。

您可以通过检查div元素并查看计算值来自行尝试：

＆＃13;

＆＃13;

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

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

＆＃13;

<div>Hello, world!</div>

＆＃13;

＆＃13;

＆＃13;

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