div的高度如何与字体大小相关

Question

假设我没有其他CSS规则（仅限浏览器默认css）

我创建了一个这样的div：

<div style="font-size:40px;">a</div>

我尝试在chrome和firefox中测量div的高度。 我在div节点上使用了offsetHeight属性。

在chrome中，我获得了46px。 在firefox中它是48px。

我真的很好奇div的offsetHeight是如何与其中的文本字体大小相关的 这些比率是否有浏览器规范？

由于

Answer 1

它使用line-height属性作为文本所在的元素。在大多数浏览器中，默认值为1.2，或者是元素中使用的字体大小的1.2倍。因此为什么它是48px。

如果您希望元素为特定大小，则可以自己设置line-height属性，无论是无字体数字，是字体大小的比例，还是显式px值。