Почему они не ведут себя как определенные

Я могу быть новичком em в CSS, но следующий пример кажется странным...

Документы говорят, что 1em равно размеру шрифта. Все в моем примере по умолчанию. Итак, 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>

Ответы

Ответ 1

По умолчанию line-height не 1, поэтому каждая строка выше размера шрифта внутри него.

Ответ 2

Он не работает, потому что line-height. В Mozilla Developer Network вы можете найти следующую информацию о значении по умолчанию line-height:

Зависит от агента пользователя. Настольные браузеры (включая Firefox) используют значение по умолчанию примерно 1.2, в зависимости от семейства шрифтов элемента.
https://developer.mozilla.org/en/docs/Web/CSS/line-height

В следующем коде line-height будет reset до 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>

Ответ 3

Высота строки не определяется font-size. Или не напрямую, по крайней мере.

Вы можете увидеть подробные правила в спецификации. Когда поле строки содержит только не замененные встроенные поля с тем же line-height и vertical-align, эти правила говорят, что высота строкового поля будет указана line-height встроенных ящиков.

Это относится к вашему случаю, потому что текст, содержащийся внутри элемента контейнера блока, завернут в анонимный встроенный блок.

Если вы не установите line-height в любое явное значение, высота строки строки будет задаваться начальным значением line-height, normal, который ведет себя следующим образом:

Сообщает агентам пользователя, чтобы установить используемое значение в "разумное" значение на основе на шрифте элемента. Значение имеет то же значение, что и <number> . Мы рекомендуем использовать значение "normal" между 1.0 и 1.2. вычисленное значение является "нормальным".

Например, если браузер выбирает 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>

Ответ 4

Укажите line-height of 1em, чтобы увидеть ожидаемые результаты:

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

Ответ 5

1em равно размеру шрифта

Горизонтально. Не вертикально. Em - ширина "m". Неправильно типографически использовать его для вертикального интервала.