为什么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的回答中有更好的描述.

如果有字符在其上或下面有部分,则它们将产生一个文本,其高度(以像素为单位)大于行高(以像素为单位).

文本可以包含低于或高于标准文本行的小细节.例如,一个的最低部分ÿ,或一个非ASCII的uppest份ü字符.这些导致定位不断出现问题.

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

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

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

...并将其复制粘贴y?到其内容中(但字符也可以).你会看到它夹在两边.