Html 为什么rem在这个代码中表现得像em？

为什么rem在这个代码中表现得像em

<div style="font-size: 10px; height: 5rem">test</div>

测试

我的html根字体大小为16px，此div是我的html中唯一的元素。

来自：

rem

此单位表示根元素的字体大小（例如，元素的字体大小）

如果

html

将具有

font size:16px

，则

div

元素的

5rem

高度将为

5*16=80px

您可以在以下代码段中看到

80px

的高度：

html{
字体大小：16px；
}

---

test

属性是框的高度，而不是文本的字体

更改div的字体大小不会影响其严格设置的高度

看，我正在设置不同的字体大小，并且高度不变——为了显示这一点，我选择了红色背景

html{
字体大小：14px；
}

测试

测试

测试