爲什麼rem在這段代碼中表現得像一個em？

Question

爲什麼rem在這段代碼中表現得像一個em？

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

我的html根字體大小是16px，這個div是我html中唯一的元素。

Answer 1

MDN來自：

rem
這個單位表示根元素的字體大小（例如該元素的字體大小）。

如果html將有font-size: 16px，將5rem高度的div元素將是5*16=80px。

你可以看到下面的代碼片段的80px高度：

html { 
 
    font-size: 16px; 
 
}

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

注意字體大小不會改變。它將是10px;只有div的height會發生變化。

Answer 2

height屬性是框的高度，而不是文本的字體。

更改div的字體大小不會影響其嚴格設置的高度。

看到了，我設置了不同的字體大小，高度不變 - 爲了表明我選擇了紅色背景。

html { 
 
    font-size: 14px; 
 
}

<div style="font-size: 10px; height: 5rem; background: red">test</div><br> 
 
<div style="font-size: 40px; height: 5rem; background: red">test</div><br> 
 
<div style="font-size: 100px; height: 5rem; background: red">test</div>