line-height и единицы измерения

Курсы §9. [Архив] Оформление текста с помощью CSS
1

В задании Вертикальный ритм текста есть такой фрагмент

    body{
        font-size:16px;
        line-height:1.3;
    }
    h1{
        font-size:1.3em;
        margin-top:0.7em;
    }
    p{
        margin-top:o.5em;
        margin-bottom:0.5em;
    }

Браузер вычисляет высоту строки как 20.8px, т.е. 16х1.3.
Но если изменить код на line-height:1.3em; высота изменяется на 21px. Никак не пойму почему, ведь базовый шрифт же не изменяется? Может кто-то знает в чем причина в разнице этих 2-х десятых?

2

Думаю, тут зависит от браузера. У вас какой? Мои замеры:

у body задана line-height: 1.3:

Chrome
body font-size: 16px; line-height: 20.7999992370605px;
h1 font-size: 20.7999992370605px; line-height: 27.0400009155273px;
p font-size: 16px; line-height: 20.7999992370605px;

FF
body font-size: 16px; line-height: 20.8px;
h1 font-size: 20.8px; line-height: 27.0333px;
p font-size: 16px; line-height: 20.8px;

у body задана line-height: 1.3em:

Chrome
body font-size: 16px; line-height: 20.7999992370605px;
h1 font-size: 20.7999992370605px; line-height: 20.7999992370605px;
p font-size: 16px; line-height: 20.7999992370605px;

FF
body font-size: 16px; line-height: 20.8px;
h1 font-size: 20.8px; line-height: 20.8px;
p font-size: 16px; line-height: 20.8px;

Из этих данных видно, что браузеры немного по-разному округляют значения.

Также видно, для p (и у самого body) и при line-height: 1.3, и при line-height: 1.3em вычисленная высота строки не меняется, т.к. им не задан явный размер шрифта, и он наследуется от body.

А для h1, т.к. у него явно задан размер шрифта, вычисление высоты строки идёт от с учётом его собственного значения font-size. В случае line-height: 1.3; высота строки высчитывается как 16(px) * 1.3(em) * 1.3 = 27.04. А в случае line-height: 1.3em; высота строки 16(px) * 1.3(em) = 20.8, как вы уже сказали.

3

Проверил у себя. Вот результат

Chrome – 20.7999992370605px в обоих случаях
FF – 20.8px в обоих случаях

IE11 – 20.8px и 21px. Т.е. погрешность Эксплорера :frowning: Выходить снова головная боль для веб-разработчика – учитывать нюансы поведения IE?

4

0.2 можно считать погрешностью в общем-то в этом случае. Ну и не стоит задавать высоту строки в em )

5

Подскажите, где можна про эти em почитать?

6

https://j.eremy.net/confused-about-rem-and-em/

и в целом по типографике

7

Спасибо!