html - 为什么 1em 比默认字体小？

Question

我在做一些实验，然后遇到了这个问题。我将 div 的高度设置为 1em，我希望 div 包含其中文本的整个高度，但事实并非如此。 1em 是我的浏览器是16px。

当我没有指定div的高度时，它成功地包含了整个文本的高度，当检查时，它的高度变成了19px。

我对 em 的理解有误吗，我认为它应该代表浏览器的默认字体高度。

div {
  margin: 0;
  padding: 0;
}
.first {
  height: 1em;
  background: green;
}
.second {
  background: orange;
}

<div class="first">سلامًا Say I Wantأًّ</div>
<br />
<div class="second">سلامًا Say I Wantأًّ</div>

https://jsfiddle.net/9t43kyu2/1/

Answer 1

文本的打印 line-height 不一定是呈现文本的实际高度(以像素为单位):

文本的 line-height css 参数只包含“caps height”和“baseline”之间的高度。根据我的经验，在大多数情况下都是 1em，在网络的大多数非标准资源中也是如此。但它的标准化细节在@web-tiki 的 answer 中有更好的描述。 .

如果有字符在其上方或下方有部分，它们将导致文本的高度(以像素为单位)大于行高(以像素为单位)。

文本可以包含低于或高于标准文本行的小细节。例如，y 的最低部分，或非 ascii Ű 字符的最高部分。这些导致定位不断出现问题。

如果你不设置div的高度，它会默认为auto，也就是说，所有的内容都会在里面。如果您将 div 高度指定为实际行大小，没有填充、边框和边距，那么您的文本的某些像素可能会溢出。你只是没有看到它，因为 overflow css 参数的默认值是 visible。

对此的最佳测试:使用以下设置创建一个 div:

#divId {
  height: 1em;
  line-height: 1em;
  overflow: hidden;
}

...并将 yŰ 复制粘贴到其内容中(但字符也可以)。您会看到它的两边都被剪掉了。