为什么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参数仅包含“大写高度”和“基线”之间的高度。在大多数情况下1em根据我的经验以及大多数非标准的网络来源。但其标准化细节在@ web-tiki的answer中有更好的描述。

如果有字符在其上方或下方有部分，则会产生一个文本，其高度（以像素为单位）大于行高（以像素为单位）。

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

如果你没有设置div高度，它将默认为auto，这意味着整个内容将在其中。如果您将div高度指定为实际线条大小，没有填充，边框和边距，那么文本的某些像素可能会溢出。您只是没有看到它，因为overflow css参数的默认值是visible。

最佳测试：使用以下设置创建div：

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

...并将yŰ复制粘贴到其内容中（但字符也可以）。你会看到它被夹在两边。

Answer 2

由于默认的行高属性，第二个div更高的事实是。它的默认值为normal。

  

<强>正常
  告知用户代理将使用的值设置为“合理”值   基于元素的字体。该值具有相同的含义   。我们建议使用“正常”的使用值介于1.0到1.2之间。[... {[{3}}]

这会使您的第二个div ~=1.2em高，具体取决于您的用户代理。您可以将其设置为line-height:1em;以查看差异：

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

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