Я могу быть новичком 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>
По умолчанию line-height не 1, поэтому каждая строка выше размера шрифта внутри него.
Он не работает, потому что 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>Высота строки не определяется 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>Укажите line-height of 1em, чтобы увидеть ожидаемые результаты:
div {
background-color: red;
height: 8em;
line-height: 1em;
}
1em равно размеру шрифта
Горизонтально. Не вертикально. Em - ширина "m". Неправильно типографически использовать его для вертикального интервала.