为什么 1em 比默认字体小？
Why is 1em shorter than the default font size?
我在做一些实验，然后我运行进入了这个问题。我将 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>
文本的印刷 line-height 不一定是呈现文本的实际高度（以像素为单位）：
文本的line-height css参数仅包含"caps height"和"baseline"之间的高度。根据我的经验，在大多数情况下 1em 以及大多数非标准的网络资源都是如此。但它的标准化细节在@web-tiki 的 .
中有更好的描述
如果有字符在其上方或下方有部分，它们将导致文本的高度（以像素为单位）大于行高（以像素为单位）。
文本可以包含低于或高于标准文本行的小细节。例如，y 的最低部分，或非 ascii Ű 字符的最高部分。这些导致定位不断出现问题
如果不设置div高度，默认为auto，即所有内容都在其中。如果您将 div 高度指定为实际行大小，没有填充、边框和边距，那么您的文本的某些像素可能会溢出。你只是没看到，因为 overflow css 参数的默认值是 visible.
对此的最佳测试：使用以下设置创建 div：
#divId {
height: 1em;
line-height: 1em;
overflow: hidden;
}
...并将 yŰ 复制粘贴到其内容中（但字符也可以）。你会看到它的两边都被剪掉了。
第二个 div 更高的事实是 因为默认行高 属性。它的默认值为 normal.
normal
Tells user agents to set the used value to a "reasonable" value
based on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.[...] [source w3.org]
这使您的第二个 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>
我在做一些实验，然后我运行进入了这个问题。我将 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>
文本的印刷 line-height 不一定是呈现文本的实际高度（以像素为单位）：
文本的line-height css参数仅包含"caps height"和"baseline"之间的高度。根据我的经验，在大多数情况下 1em 以及大多数非标准的网络资源都是如此。但它的标准化细节在@web-tiki 的
如果有字符在其上方或下方有部分，它们将导致文本的高度（以像素为单位）大于行高（以像素为单位）。
文本可以包含低于或高于标准文本行的小细节。例如，y 的最低部分，或非 ascii Ű 字符的最高部分。这些导致定位不断出现问题
如果不设置div高度，默认为auto，即所有内容都在其中。如果您将 div 高度指定为实际行大小，没有填充、边框和边距，那么您的文本的某些像素可能会溢出。你只是没看到，因为 overflow css 参数的默认值是 visible.
对此的最佳测试：使用以下设置创建 div：
#divId {
height: 1em;
line-height: 1em;
overflow: hidden;
}
...并将 yŰ 复制粘贴到其内容中（但字符也可以）。你会看到它的两边都被剪掉了。
第二个 div 更高的事实是 因为默认行高 属性。它的默认值为 normal.
normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2.[...] [source w3.org]
这使您的第二个 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>