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

Question

我可能是新来em的CSS,但下面的例子似乎有些奇怪...

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

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

<div id="my-div">
  One<br/>
  Two<br/>
  Three<br/>
  Four<br/>
  Five<br/>
  Six<br/>
  Seven<br/>
  Eight
</div>

有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:

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

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

从官方的W3C规范:

告知用户代理根据元素的字体将使用的值设置为"合理"值.该值具有相同的含义.我们建议使用1.0到1.2之间的"正常"值.计算值为"正常".
https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

但是每个用户代理(浏览器)都会line-height在推荐值1.0和1.2之间定义自身的高度!

Answer 3

一个的高度线箱是未由下式确定font-size.或者至少不是直接的.

您可以在规范中查看详细规则.当行框仅包含非替换用相同的内框line-height和vertical-align,那些规则说,行框的高度将被给予line-height的行内框.

这适用于您的情况,因为直接包含在块容器元素中的文本包装在匿名内联框中.

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

告知用户代理根据元素的字体将使用的值设置为"合理"值.该值与<number>具有相同的含义 .我们建议使用1.0到1.2之间的"正常"值.该计算出的值是"正常".

例如,如果浏览器选择1.15,1em将覆盖1/1.15 = 0.8696线的高度.那是如此接近7/8 = 0.8750你所观察到的.

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

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

<div id="my-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;
}