Как нивелировать расстояние от верхней границы элемента до символов текста?

Question

[Роман Назаркин]

Всем привет!

Собственно вопрос вот какой: при использовании достаточно больших размеров шрифта(чаще всего в h1-h3 элементах) имеем странное расстояние от верхней границы элемента до верхней границы символа:


Понимаю, что можно от него избавиться(частично) установив line-heigth в значение 1, но ситуация такая, что заголовок может состоять из нескольких строк и нормальный интерлиньяж все же важен.

Более того, это расстояние варьируется от шрифта к шрифту. Вот jsfiddle для примера: https://jsfiddle.net/9tsb9Lmf/

При pixel-perfect верстке это создает серьезные проблемы ибо непонятно откуда берутся данные цифры и как они будут себя вести на другом шрифте. Например мне нужно отцентровать блок с заголовком, но я не знаю, что будет с этим расстоянием, в итоге блок смещается визуально вниз. Что с этим делать?

Comments

[Ankhena]

такие расстояние еще и в разных браузерах разные, хром от ФФ, обычно на 1 точку отличаются при размере шрифта 16-18 точек

Answer 1

[Александр]

Шрифт по вертикали в своей строке (которая больше самого шрифта из-за line-height > 1) выравнивается по центру. Соотвественно, у него вверху и внизу есть расстояние до краев самой строки.
Нивелировать - задать отрицательный margin-top, как вариант.

Comments

[Роман Назаркин]

про отрицательный margin-top тоже думал, но от шрифта к шрифту разные значения нужны, а при наличии опции смены шрифта такой прикол не прокатит. кстати, при line-height = 1 небольшие отступы тоже есть..

[Александр]

Роман Назаркин: вы в готовом проекте позволяете менять шрифт?

[Роман Назаркин]

Александр: разговор идет о wordpress теме, в которой присутствует функционал смены шрифта. так что, да.