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

Question

我可能对 CSS 中的 em 很陌生，但下面的例子看起来很奇怪......

文档说 1em 等于字体大小。我的示例中的所有内容都是默认的。所以 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>

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

有 8 行，但是 8 em 只覆盖了其中的 7 行。似乎 1em 只覆盖了一行的 7/8 或其他内容......

为什么？我做错了什么？

Answer 1

默认的 line-height 不是 1 所以每一行都比其中文本的字体大小高。