Question

我可能是 CSS 中em的新手，但以下示例似乎很奇怪......

文档说1em等于font-size。我的例子中的所有内容都是默认的。所以8em应该是8行文字的大小，对吗？

div {
  background-color: red;
  height: 8em;
}

<div>
  One<br/>
  Two<br/>
  Three<br/>
  Four<br/>
  Five<br/>
  Six<br/>
  Seven<br/>
  Eight
</div>

https://jsfiddle.net/q8vs7r4u/1/

有8行，但8 em仅涵盖其中7行。似乎1em仅覆盖了一条线的7/8，或者其他......

为什么呢？我做错了什么？

Answer 1

默认line-height不是1，因此每一行都高于其中文字的字体大小。

Answer 2

因为line-height而无效。在Mozilla开发人员网络上，您可以找到有关line-height的默认值的以下信息：

取决于用户代理。桌面浏览器（包括Firefox）使用大约1.2的默认值，具体取决于元素的font-family https://developer.mozilla.org/en/docs/Web/CSS/line-height

在以下代码中，line-height将重置为1em，整个文字符合div：

＆＃13;

div {
  background-color:red;
  height:8em;
  line-height:1em;
}

＆＃13;

<div>
  One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight
</div>

＆＃13;

来自官方的W3C规范：

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;值基于元素的字体。该值具有相同的含义。我们建议使用正常的＆＃39;正常值。介于1.0到1.2之间。计算出的值是“正常”＆＃39; https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

但是每个用户代理（浏览器）都会在推荐值1.0和1.2之间定义line-height本身的高度！

Answer 3

由line box确定的font-size的高度不是。或者至少不是直接的。

您可以在规范中看到detailed rules。当换行符仅包含具有相同line-height和vertical-align的未替换内联框时，这些规则会说明行框的高度将由内联框的line-height给出

这适用于您的情况，因为直接包含在块容器元素中的文本包含在anonymous inline box中。

如果您未将line-height设置为任何显式值，则行框的高度将由line-height，normal的初始值给出，其行为如下：

告诉用户代理将使用的值设置为“合理”值在元素的字体上。该值具有相同的含义 <number>。我们建议使用1.0到1.0之间的“正常”值 1.2。 computed value是'正常'。

例如，如果浏览器选择1.15，则1em将覆盖行的高度1/1.15 = 0.8696。这与您观察到的7/8 = 0.8750非常接近。

注意匿名内联框从块父框继承可继承的属性，如line-height。然后，您可以将块的line-height设置为显式长度，并将该长度的高度乘以行数。

div {
  line-height: 1.2em;
  height: calc(1.2em * 8);
  background: red;
}

<div>One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight</div>

Answer 4

指定line-height 1em以查看预期结果：

div {
  background-color: red;
  height: 8em;
  line-height: 1em;
}

Answer 5

1em等于font-size

水平。不垂直。 em是'm'的宽度。用于垂直间距的打印无效。

为什么em的行为不符合定义

5 个答案: