line-height в inline и inline-block

[SnowSilver]

Почему line-height на высоту inline элемента не влияет, а на inline-block влияет ?

Например изначально, при дефолтном размере шрифта в 16px, высота строки в хроме показывает 18.18px. И если применим line-height: 1; - то высота не изменится.

А если мы превратим строчный элемент в inline-block, тогда высота уменьшается до 15.45px - и тогда высота строки равняется почти размеру шрифта. Хотя line-height: 1 это множитель шрифта, по идеи в моем понимание высота должна равняться 16px, а не 15.45.

Эти значения получены у не стандартного шрифта... Но это сути не меняет.

Небольшая заготовка - https://codepen.io/anon/pen/Qxpgoe. Правда там у строчного  элемента изначально 17px , а у инлайн блока после установки line-height:1 -  16px.

 

 

 

Edited June 11, 2018 by SnowSilver

[AlexZaw]

line-height это не высота строки, а расстояние между базовыми линиями соседних строк.

У текста есть запас на всякие там умлауты и иже с ними, у инлайн блоков запаса нет

Edited June 11, 2018 by AlexZaw

[SelenIT]

В 11.06.2018 в 19:50, AlexZaw сказал:

line-height это не высота строки, а расстояние между базовыми линиями соседних строк

Строго говоря, не совсем.

Грубо упрощая, у строчного элемента есть две высоты: та, которая заливается фоном, реагирует на :hover и т.п., и та, которая влияет на высоту строки, в которой элемент находится. Изначально обе высоты определяются исключительно метриками шрифта (что-то-Ascent — «надводная» часть символа над базовой линией, что-то-Descent — «подводная» часть, и, опционально, что-то-Leading — дефолтный зазор между символами соседних строк, причем разные ОС используют разные метрики). Браузерный отладчик, скорее всего, показывает для него первую высоту.

Высоту заливки фона уменьшить нельзя, но можно увеличить верхним и нижним padding-ами. Высоту, на которую элемент «распирает» свою строку, можно и увеличить, и уменьшить — задав line-height. Разница между заданной line-height и дефолтной высотой (той, что по метрикам) делится пополам и по половине прибавляется сверху и снизу (так что элемент всегда центрируется в строке). Если line-height меньше, чем дефолтная высота, то фон элемента будет выступать вверх и вниз за границы строки, а буквы соседних строк будут частично перекрываться.

Инлайн-блок же внутри устроен именно как блок, со своим собственным контейнером строки. И его высота определяется высотой этой строки (тем, насколько его текст ее «распирает»), т.е. конкретным значением line-height. А снаружи этот блок вписан в строку (как картинка) и влияет на высоту этой строки своими внешними габаритами (включая padding/border/margin).