Как узнать расстояние от верха до base-line первой строки текста?

Question

[Iwan]

У текста в несколько строк установлено:

font-size: 35px;
line-height: 50px;

https://jsfiddle.net/zjv1q8u4/2/
Не понимаю как вычислить расстояние от верхнего края div до base-line первой строки текста. В примере по ссылке выше это расстояние 36px; Как вычисляются эти 36px?

Comments

[Евгений]

А сброс стилей есть?)) Что показано в инспекторе?))

[RAX7]

Примерно так:

background-position: 0 calc((var(--line-height) - var(--font-size)) / 2 + var(--font-size) - 0.19em);

значение 0.19em зависит от шрифта и его придется подбирать на глаз или вымерять линейкой

Answer 1

[Арсений Матыцин]

Скрин буквально неверный, интерлиньяж в вебе работает не так, как в редакторе, он не отсчитывается от baseline шрифта, это буквально высота всей строки. А размер шрифта это точно не x-height с ascent и пустым пространством, это еще и descent с пустым пространством, сформированным интерлиньяжем.

Если хочешь поседеть, можешь почитать, как это происходит тут.