remがこのコードのemのように動作するのはなぜですか？

Question

remがこのコードのemのように動作するのはなぜですか？

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

私のhtmlのルートfont-sizeは16pxで、このdivは私のhtmlの唯一の要素です。 MDNから

Answer 1

：

rem
このユニットは、ルート要素のフォントサイズ（要素の例えばフォントサイズ）を表します。

htmlがfont-size: 16pxを持っている場合は、あなたのdiv要素の5rem高さが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>