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

Question

假设我没有额外的 CSS 规则(只有浏览器默认的 css)

我创建了一个这样的 div:

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

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

在 chrome 中，我得到 46px。 在 Firefox 中是 48px。

我很好奇div的offsetHeight和里面文字的fontsize有什么关系 这些比率是否有浏览器规范？

谢谢

Answer 1

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

如果您希望某个元素具有特定大小，您可以自己为该元素设置 line-height 属性，可以是一个与字体大小成比例的无单位数字，也可以是一个明确的px值。