Как перевести line height из пикселей

Обновлено: 06.07.2024

line-height и vertical-align — это простые свойства CSS. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как их использовать. К сожалению, это не так — на самом деле они, пожалуй, являются самыми сложными свойствами, поскольку играют важную роль в создании малоизвестной особенности CSS под названием «строчный контекст форматирования» (inline formatting context).

Например, line-height можно задать в виде длины или безразмерного значения, но его значение по умолчанию — normal (стандартное). Хорошо, но что значит «стандартное»? Зачастую пишут, что это (как правило) 1, или, может быть, 1,2. Даже в спецификации CSS нет четкого ответа на данный вопрос.

Нам известно, что безразмерное значение line-height зависит от значения font-size , но проблема в том, что font-size: 100px выглядит по-разному для разных гарнитур. В связи с этим возникает вопрос: всегда ли line-height будет одинаковым или может различаться? Действительно ли это значение находится в промежутке от 1 до 1,2? А как vertical-align влияет на line-height ?

Давайте углубимся в не самый простой механизм CSS…

Начнем с разговора о font-size

Рассмотрим этот простой HTML-код с тегом p , содержащим три элемента span , каждый из которых со своим font-family :

При использовании одного и того же font-size в разных гарнитурах высота получается различной:

Даже если нам известно об этой особенности, почему font-size: 100px не создает элементы высотой 100px? Я измерил эти значения: Helvetica — 115px, Gruppo — 97px и Catamaran — 164px.

Хотя на первый взгляд это выглядит несколько странно, все вполне ожидаемо — причина в самом шрифте. Как это работает:

Шрифт задает свой em-квадрат (em-square) (он же UPM, units per em — единиц на кегельную площадку) — своего рода площадку, в рамках которой будет рисоваться каждый символ. В этом квадрате для измерения используются относительные единицы, и, как правило, для него принимаются размеры 1000 единиц. Хотя также бывает 1024, 2048 или иное количество единиц.
В зависимости от количества относительных единиц задаются метрики шрифтов, такие как высота верхних и нижних выносных элементов (ascender/descender), прописных и строчных букв. Некоторые значения могут выходить за рамки em-квадрата.
В браузере относительные единицы масштабируются до необходимого font-size .

em-квадрат принят за 1000 единиц;
высота верхних выносных элементов составляет 1100 единиц, а нижних — 540.

Таким образом, шрифт Catamaran использует 1100 + 540 единиц в em-квадрате, состоящем из 1000 единиц, и поэтому при размере font-size: 100px получается высота 164px. Данная вычисленная высота определяет область содержимого (content-area) элемента (этот термин будет использоваться далее по тексту). Можете считать область содержимого областью, к которой применяется свойство background .

Можно также предположить, что высота прописных букв составляет 68px (680 единиц), а строчных (x-высота) — 49px (485 единиц). В результате 1ex = 49px и 1em = 100px, а не 164px (к счастью, em зависит от font-size , а не от вычисленной высоты).

Прежде чем нырнуть глубже, рассмотрим основные моменты, с которыми придется столкнуться. Элемент p при отображении на экране может состоять из нескольких строк с соответствующей шириной. Каждая строка состоит из одного или нескольких строчных элементов (inline elements)(HTML-тегов или анонимных строчных элементов для текстового содержимого) и называется контейнером строки (line-box). Высота контейнера строки зависит от высот его дочерних элементов. То есть браузер вычисляет высоту каждого строчного элемента, а по ней — высоту контейнера строки (от самой верхней до самой нижней точки ее дочерних элементов). В результате высоты контейнера строки всегда достаточно, чтобы вместить все его дочерние элементы (по умолчанию).

Каждый HTML-элемент на самом деле представляет собой стопку контейнеров строки. Если вам известна высота всех контейнеров строки, то известна и высота элемента.

При изменении приведенного выше HTML-кода следующим образом:

будет сгенерировано три контейнера строки:

в первом и последнем будет по одному анонимному строчному элементу (текстовое содержимое);
во втором будет два анонимных строчных элемента и 3 элемента span .

Отчетливо видно, что второй контейнер строки больше остальных по высоте из-за вычисленной области содержимого его дочерних элементов, точнее того, который использует шрифт Catamaran.

Сложным моментом в создании контейнера строки является то, что мы, по сути, не можем ни увидеть, ни управлять им через CSS. Даже применение фона к ::first-line не помогает отобразить высоту первого контейнера строки.

line-height: о проблемах и прочих вопросах

До этого момента я ввел два понятия — область содержимого и контейнер строки. Если вы внимательно читали, то заметили, что высота контейнера строки вычисляется на основании высоты его дочерних элементов, но не говорил, что на основании высоты области содержимого его дочерних элементов. А это большая разница.

Даже если это может показаться странным, у строчного элемента есть две различных высоты: высота области содержимого и высота виртуальной области (virtual-area) (я сам придумал термин «виртуальная область», поскольку эту высоту мы увидеть не можем; в спецификации этого термина вы не найдете).

Высота области содержимого определяется метриками шрифта (как мы уже видели ранее).
Высота виртуальной области (virtual-area) представляет собой line-height , и это — высота, которая используется для вычисления высоты контейнера строки.

Кроме того, сказанное опровергает распространенное мнение о том, что line-height — это расстояние между базовыми линиями (baseline). В CSS это не так.

В других редакторских программах это может быть расстоянием между базовыми линиями. Например, в Word и Photoshop это так и есть. Основная разница в том, что в CSS это расстояние есть и для первой строки.

Вычисленная разница в высоте между виртуальной областью и областью содержимого называется интерлиньяж (leading). Одна половина интерлиньяжа добавляется сверху к области содержимого, а вторая — снизу. Поэтому область содержимого всегда находится по центру виртуальной области.

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

Есть и другие виды строчных элементов:

замещаемые строчные элементы ( img , input , svg и т. д.);
inline-block и все элементы типа inline-* ;
строчные элементы, которые задействованы в особом контексте форматирования (например, в элементе flexbox все flex-компоненты блокофицируются).

И все же проблема остается прежней: каково значение normal для line-height ? Ответ на этот вопрос, как и в случае вычисления области содержимого, нужно искать среди метрик шрифта. Итак, вернемся к FontForge. Размер em-квадрата для Catamaran равняется 1000, но мы наблюдаем много значений для верхних и нижних выносных элементов:

Общие значения Ascent/Descent: высота верхнего выносного элемента — 770, нижнего — 230. Используются для создания символов (таблица «OS/2»).
Метрики Ascent/Descent: высота верхнего выносного элемента — 1100, нижнего — 540. Используются для определения высоты области содержимого (таблицы «hhea» и «OS/2»).
Метрика Line Gap (междустрочный интервал). Используется для определения line-height: normal , данное значение прибавляется к метрикам Ascent/Descent (таблица «hhea»).

В качестве сравнения: для шрифта Arial em-квадрат равен 2048 единиц, высота верхнего выносного элемента — 1854, нижнего — 434, междустрочный интервал — 67. Таким образом, при font-size: 100px область содержимого составит 112px (1117 единиц), а значение line-height: norma l — 115px (1150 единиц или 1,15). Все эти метрики индивидуальны для каждого шрифта и задаются дизайнером шрифта.

Следовательно, задавать line-height: 1 неэффективно. Напомню вам, что безразмерные значения зависят от font-size , а не от области содержимого, а то, что размер области содержимого превышает размер виртуальной области, является причиной множества наших проблем.

Но причина не только в line-height: 1 . Если уж на то пошло, из 1117 шрифтов, установленных на моем компьютере (да, я установил все шрифты из Google Web Fonts), у 1059 шрифтов, то есть в 95%, вычисленный показатель line-height больше 1. Вообще, их вычисленный показатель line-height варьируется от 0,618 до 3,378. (Вам не показалось — 3,378!)

Небольшие подробности по поводу расчета line-box :

Для строчных элементов — padding и border увеличивают область фона, но не высоту области содержимого (и не высоту контейнера строки). Поэтому область содержимого — это не всегда то, что видно на экране. От margin-top и margin-bottom нет никакого эффекта.
Для замещаемых строчных элементов, элементов типа inline-block и блокофицированных строчных элементов — padding , margin и border увеличивают height и, следовательно, высоту области содержимого и контейнера строки.

vertical-align: то свойство, которое управляет всем

Я еще не останавливался подробно на свойстве vertical-align, хотя оно является основным фактором для вычисления высоты контейнера строки. Можно даже сказать, что vertical-align может играть ведущую роль в строчном контексте форматирования.

Его значение по умолчанию — baseline . Помните такие метрики шрифта, как высота верхнего и нижнего выносных элементов (ascender/descender)? Эти значения определяют, где находится базовая линия и, следовательно, соотношение между верхней и нижней частями. Поскольку соотношение между верхним и нижним выносными элементами редко бывает 50/50, это может приводить к неожиданным результатам, например с элементами того же уровня.

Начнем с такого кода:

Тег p с двумя одноуровневыми элементами span , наследующими font-family , font-size и фиксированную line-height . Базовые линии совпадают, и высота контейнера строки равна их line-height .

Но что, если у второго элемента font-size будет меньше?

Как бы странно это ни звучало, выравнивание базовой линии, выставленной по умолчанию, может привести к увеличению высоты (!) контейнера строки, как показано на рисунке ниже. Напоминаю, что высота контейнера строки рассчитывается от самой верхней до самой нижней точки его дочерних элементов.

Это могло бы стать доводом в пользу безразмерных значений line-height , но иногда требуются фиксированные значения для создания идеального вертикального ритма. Честно говоря, независимо от того, что вы выберете, у вас всегда будут проблемы с выравниванием строки.

Рассмотрим еще один пример. Тег p с line-height: 200px , который содержит один единственный span , наследующий его line-height

Какова высота контейнера строки? Мы могли бы предположить, что 200px, но это не так. Проблема в том, что у p есть свое собственное, отличающееся значение font-family (по умолчанию это serif). Базовые линии тега p и span , по всей вероятности, находятся на разной высоте, и поэтому высота контейнера строки больше, чем предполагалось. Это вызвано тем, что браузеры производят вычисление, считая, что каждый контейнер строки начинается с символа нулевой ширины, который в спецификации называется «strut».

Невидимый символ с видимым эффектом.

Итак, у нас все та же проблема, что и в случае с одноуровневыми элементами.

С выравниванием по базовой линии все плохо, но, может, нас спасет vertical-align: middle ? Как сказано в спецификации, middle «выравнивает контейнер по вертикальной средней точке (midpoint) с базовой линией родительского контейнера плюс половина x-высоты первичного элемента». Соотношение базовых линий, равно как и x-высот (x-height), может быть различным, поэтому на выравнивание по middle тоже нельзя положиться. А хуже всего тот факт, что в большинстве сценариев middle никогда не бывает по-настоящему «по центру». На это влияет слишком много факторов, которые нельзя задать через CSS (x-высота, соотношение верхнего и нижнего выносных элементов и др.).

Помимо этого, есть еще четыре значения, которые в некоторых случаях могут оказаться полезными:

vertical-align: top / bottom — выравнивание по верхней или нижней границе контейнера строки;
vertical-align: text-top / text-bottom — выравнивание по верхней или нижней границе области содержимого.

Но будьте внимательны: во всех случаях выравнивается виртуальная область, то есть невидимая высота. Рассмотрим простой пример с использованием vertical-align: top . Невидимая line-height может давать странный, но ожидаемый результат.

И наконец, vertical-align также принимает числовые значения, которые смещают контейнер выше или ниже относительно базовой линии. Этот последний вариант может пригодиться.

CSS восхитителен

Мы обсудили вопрос взаимодействия line-height и vertical-align , но сейчас вопрос в том, можно ли управлять метриками шрифта через CSS? Если кратко, то нет. Хотя я бы этого очень хотел. В любом случае, думаю, настало время немного развлечься. Метрики шрифта являются постоянными величинами, поэтому хоть что-то у нас должно получиться.

Что, если, например, нам нужен текст шрифтом Catamaran с высотой прописных букв ровно 100px? Вроде выполнимо, так что давайте произведем некоторые расчеты.

Прежде всего укажем все метрики шрифта как пользовательские свойства CSS, а затем вычислим font-size , при котором высота прописных букв будет равняться 100px.

Довольно просто, не так ли? Но как быть, если нам нужно, чтобы текст был визуально по центру, а оставшееся пространство равномерно распределялось сверху и снизу от буквы «B»? Для этого необходимо рассчитать vertical-align на основании соотношения между верхним и нижним выносными элементами.

Сначала вычислим line-height: normal и высоту области содержимого:

Затем нам потребуются:

расстояние от низа прописной буквы до нижнего края;
расстояние от верха прописной буквы до верхнего края.

Теперь можем вычислить vertical-align как разницу между этими расстояниями, умноженную на вычисленное значение font-size (Это значение нужно применить к строчному дочернему элементу).

И наконец, задаем необходимое значение line-height и вычисляем его, сохраняя вертикальное выравнивание:

Теперь довольно просто добавить графический элемент той же высоты, что и буква «B»:

Напоминаю, что этот тест показан исключительно для демонстрации, и полагаться на его результаты не стоит. Причин тут много:

С помощью CSS мы можем управлять не только расстоянием между словами и буквами, но и межстрочным интервалом. Казалось бы, в каких ситуациях может пригодиться такая тонкая настройка?

Я считаю, что управление расстоянием между строками входит в Топ 10 самых важных настроек для любого блога. Связано это с тем, что используя эту возможность, мы можем облегчить чтение текста нашими пользователями.

А что может быть дороже удобства посетителя сайта?

Свойство line-height

При помощи свойства line-height мы задаем межстрочный интервал. Вообще, это значение отсчитывается браузером автоматически, в зависимости от размера и вида шрифта.

Считается, что межстрочный интервал, который по-другому называют интерлиньяж, равняется расстоянию между двумя базовыми линиями текста.

Межстрочный интервал

На иллюстрации выше вы можете видеть высоту строки, обозначаемую как line-height. Непосредственное расстояние между ними принято называть leading.

Например, если мы зададим расстояние между строками равное 24 пикселям, а размер шрифта 16 пикселям, то leading у нас будет равняться 8 пикселям (24-16).

Допустимые значения

В качестве значений можно использовать все те же пиксели, em и проценты, с которыми мы познакомились в уроке по размеру шрифтов. Например, давайте попробуем установить межстрочный интервал в 24 пикселя.

Как видите, все довольно просто. Однако, в подобной записи есть недостаток. Заключается он в том, что в будущем при изменении размера текста нужно не забыть поменять интерлиньяж.

По-другому обстоит дело с процентами и значением em, которые высчитываются исходя из кегля шрифта. Давайте попробуем указать значение в полтора раза больше размера текста. Для этого воспользуемся сразу двумя показателями.

Как видно на примере выше, можно использовать как проценты, так и em. Они абсолютно равнозначны.

Лучшее решение

Так как свойство line-height наследуется, в использовании процентов и единиц измерения em есть свой недостаток. Заключается он в том, что в подобных случаях наследуется не коэффициент величины межстрочного интервала над размером шрифта, а само значение.

Например, дадим шрифтам тега body размер в 12 px, и интерлиньяж в 150 процентов. Значит, конечное значение будет равняться 18 пикселю.

Далее, поменяем кегль текста в абзацах на 20 px. В этом случае, межстрочный интервал будет не 30 px (18*1.5), как ожидалось, а останется 18 px, который был унаследован от тега body.

Множитель

Для задания интервала между строками лучше использовать множитель - простое числовое значение, которое, между прочим наследуется надлежащим образом.

В данном примере, межстрочное расстояние всегда будет в полтора раза больше размера текста. Даже при наследовании.

Исходя из этого, я советую вам отдать предпочтение числовому множителю. Так вы обезопасите себя от непредсказуемых последствий, и освободите от дополнительной работы по смене значений свойства line-height, при корректировке кегля шрифта.

А на этом у меня все. Смею предположить что вам все понятно, если нет - задавайте свои вопросы в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

Давайте сперва поговорим о font-size

Посмотрите на простой HTML код. Тег p содержит три span , каждый из которых имеет свой собственный font-family :

Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:

Разные font-family, одинаковое значение font-size, получаем разную высоту элементов

Почему font-size: 100px не создает элементы с высотой в 100px? Я измерил и получилось:

Элементы со значением font-size:100px имеют разную высоту

Все это кажется немного странным, на первый взгляд, но это вполне объяснимо. Причина находится внутри самого шрифта. Вот как это работает:

шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц. Но здесь также может применяться значение 1024, 2048 и т.д.
устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата.
в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.

Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:

Значения шрифта в FontForge

Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано font-size: 100px . Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье. Вы можете думать о контент-области, как об области, для которой применяется свойство background .

Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px

Каждый HTML-элемент на самом деле является неким множеством, состящим из line-boxes. Если вы знаете высоту каждого line-box, Вы знаете высоту элемента.

Если обновить предыдущую страницу HTML код, то получим:

Он будет генерировать три line-boxes:

первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
второй, содержащий два встроенных элемента и три < span>

Тег <р> (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)

Мы ясно видим, что второй line-box выше остальных, в связи с вычисленной контент-областью его дочерних элементов, один из которых использует шрифт Catamaran.

Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом : : first-line не дает нам ни какой визуальной подсказки о высоте line-box.

line-height: к проблемам и за ее пределами

Ранее я ввел два понятия: контент-область (content-area) и line-box. Если вы читали внимательно, то я сказал, что высота line-box вычисляется в соответствии с его дочерней высотой, я не сообщал дочерним элементам высоту их контент-области. В этом и заключается больше различие.

Хотя это может показаться странным, inline-элемент имеет две разные высоты: высоту content-area и высоту virtual-area (Я изобрел термин virtual-area , обозначая таким образом высоту, невидимую для нас. Этого термина Вы не найдете в спецификации).

Inline-элементы, имеющие две разные высоты

Это ломает распространенное мнение о том, что line-height это расстояние между базовыми линиями (baselane). В CSS это не так.

На основе его значений, line-height (virtual-area) может быть больше, меньше или равной content-area. В случае меньшего размера virtual-area, ведущее значение станет отрицательным и line-box стане визуально меньше его дочернего элемента.

Существуют также другие виды inline-элементов:

inline-элементы ( < img> , < input> , < svg> , etc.)
inline-block и все inline-* элементы
inline-элементы, которые используются в качестве форматирования текста (например, во flexbox-элементах)

Для этих inline-элементов, высота вычисляется на основе height , margin и border . Если height имеет значение auto , то line-height используется в content-area и строго равна line-height .

Inline замещаемые элементы, inline-block/inline-* и blocksified inline элементы имеют контент-область, равную их высоте или высоте линии

Итак, вернемся к FontForge. Em-квадрат шрифта Catamaran равен 1000, но мы видим значения ascender/descender:

В нашем случае, шрифт Catamaran определяет разрыв в 0 единиц для line gap, поэтому line-height : normal будет равен content-area, который составляет 1640 единиц, иначе 1.64.

Становится очевидным, что установка line-height : 1 плохая практика.Я хотел бы напомнить вам, что безразмерное значение относительно для font-size и virtual-area меньше, чем content-area. Именно это и является источником многих наших проблем.

Используя line-height: можно создать line-box меньше, чем контент-область

Уточнения о вычислении line-box:

vertical-align: свойство, которое управляет всеми

Я еще не упомянул о свойстве vertical-align , несмотря на то, что оно важно для вычисления высоты line-box. Можно даже сказать, что vertical-align играет ведущую роль в форматировании текста.

Тег < p> с двумя < span> унаследовал значения font-family , font-size и имеют постоянный line-height . Базовые линии (baselines) будут соответствовать и высота line-box будет равна их line-height .

Те же значения шрифта, одинаковые исходные условия, кажется, что все в порядке

Что делать, если второй элемент имеет меньший font-size ?

Как ни странно, но по умолчанию базовая линия может выровнять выше (!) line-box так, как показано на картинке. Я хотел бы напомнить вам, что высота line-box вычисляется от самой высокой точки своего дочернего элемента к низшей точке своего дочернего элемента.

Меньший дочерний элемент может привести к увеличении высоты line-box

Это может быть аргументом в качестве использования безразмерного значения line-height , но иногда необходимо его фиксировать, чтобы создать идеальный вертикальный размер. Если честно, то независимо от того, что вы выберете, вы всегда будете иметь проблемы с inline выравниванием.

Рассмотрим еще один пример. Тег < p> с line-height : 200px , содержащий один < span> , унаследовал значение line-height

Насколько высок line-box? Следует ожидать, что 200px, но это не так. Проблема здесь заключается в том, что < p> имеет свой собственный font-family (по умолчанию serif ). Базовые линии тега < p> и < span> скорее всего, будут различны, а высота line-box выше, чем ожидалось. Это происходит потому, что браузеры производят вычисления следующим образом: так, как если бы каждый line-box начинался бы с нулевой ширины символа.

В итоге, мы столкнулись с той же проблемой, что и в предыдущем примере.

Каждый дочерний элемент выравнивается так, как если бы его line-box появился бы с невидимой нулевой ширины символа

Базовая линия скачен, но что можно сказать на счет vertical-align : middle ? Как пишут в спецификации, middle “выравнивает вертикальную среднюю точку контейнера с базовой линией родительского контейнера плюс половина x-height родительского блока”. Соотношение базовых линий различны, а также как различно соотношение x-height, следовательно выравнивание middle не надежно. Как правило, middle никогда не бывает по “середине”. Этому способствуют много факторов в CSS (x-height, ascender/descender соотношение, и тд.)

В качестве примечания:

vertical-align : top / bottom выравнивает по верху и низу line-box
vertical-align : text-top / text-bottom выравнивает по верху и низу content-area

Vertical-align: top, bottom, text-top и text-bottom

Но используйте с осторожностью, это выравнивает virtual-area. Посмотрите это на простом примере, используя vertical-align : top . Невидимый line-height может привести к странным, но не удивительным, результатам.

vertical-align может привести к нечетным результат на первых порах, но предполагается, что line-height создаст визуализацию

И в заключении стоит отметить, что vertical-align также принимает числовые значения, которые повышают или понижают поле относительно базовой линии.

CSS превосходен

Мы поговорили о том, как line-height и vertical-align работают вместе, но теперь вопрос: можно ли управлять показателями шрифта с помощью CSS? Короткий ответ: нет.

Что делать, если, например, мы хотим, чтобы текст с помощью шрифта Catamaran, где высота заглавной буквы 100px стал выше? Давайте немного займемся математикой.

Сначала мы устанавливим все показатели шрифта в качестве CSS-свойств, а затем вычислим font-size ,чтобы получить высоту заглавной буквы 100px.

Во-первых, установим line-height : normal и высоту content-area:

Затем нам нужно установить:

расстояние от нижней части буквы к нижнему краю
расстояние от верхней части буквы к верхнему краю

Теперь мы можем вычислить vertical-align , которая представляет собой разность между расстояниями, умноженное на величину font-size . (мы должны применить это значение для дочернего элемента inline)

В конце концов, мы устанавливаем желаемый line-height и вычисляем его при сохранении вертикального выравнивания:

Результат установки для line-height разных значений. Текст всегда располагается по середине.

Иконка и буква B имеют одинаковую высоту

Обратите внимание, что это демо предназначено только для демонстрационных целей. Почему? На это есть много причин:

Заданное значение, расчетное значение и применяемое значение в документе немного неловко. Мы используем более интуитивно понятный язык, чтобы описать разницу между использованием процентного и числового назначения.

После использования процентного присвоения фактическая высота строки будет рассчитываться как размер шрифта * процент, иПередайте эту высоту строки дочернему элементу, Подэлементы не будут изменять унаследованную высоту строки путем изменения размера шрифта, если только высота строки не будет переопределена
После использования нумерации изменитеЭтот номер (несколько) передается дочернему элементу, Каждый уровень дочернего элемента получит фактическую высоту строки в соответствии со своим собственным размером шрифта *, кратным.

Примеры следующие:
Оранжевая область - это процентное назначение, а светло-синяя область - это номер (несколько).
После того, как процент назначен, высота строки передается дочернему элементу как фиксированное значение, поэтому текст перекрывается из-за несоответствия.
и несколько назначений являются нормальными.

Правила расчета высоты строк

Высота линейного блока определяется по следующим правилам:

Если элемент содержит текст, отображаемый несколькими шрифтами, браузермаксимальнаяРазмер шрифта для определения «нормального» значения «line-height»

При вычислении высоты каждого блока встроенного уровня в линейном блоке для заменяемого элемента элемент встроенного блока вычисляется в соответствии с высотой поля полей;
Для встроенного блока он рассчитывается в соответствии с его фактическим значением высоты строки.

Высота линейного блока - это расстояние между верхом самого верхнего ящика и нижней частью самого нижнего ящика (включая виртуальную стойку)
Пример:
Как показано на рисунке, элемент замены использует поле поля для участия в вычислении высоты, высота линейного блока - от верхней части первого изображения до нижней части второго изображения, а текстовые сегменты s1 и s2 соответственно выровнены по вертикали. : верх / низ выровнены по вертикали и соответственно прикреплены к верхнему и нижнему краям линейного блока.

Пустые встроенные элементы генерируют пустые встроенные блоки, но атрибуты этих блоков по-прежнему влияют на вычисление высоты строки.
Пример:
В элементе div есть пустой интервал. Хотя в нем нет содержимого, высота строки настроена так, чтобы влиять на высоту линейного блока.

В западном тексте базовая линия - это позиция, где большинство букв «сидят», как показано ниже.
Среди них строчная буква x является наиболее представительной. Ее нижняя часть расположена на базовой линии, а верхняя часть прикреплена к центральной линии. Ее высота называется x-height. В CSSвертикальное выравнивание: значение середины заключается в выравнивании исходного центра соответствующего поля с базовой линией + 1/2 * x-height(Обратите внимание, что это не средняя линия, а половина средней линии).

CSS считает, что любой шрифт имеет спецификацию шрифта, которая определяет высоту выше и глубину ниже базовой линии. Здесь мы используем H для высоты и D. для глубины. Расстояние от вершины до основания глифа HD = H + D.

При фактическом рендеринге браузер выравнивает глифы в незаменяемом встроенном блоке в соответствии с соответствующей базовой линией, а затем определяет A и D для каждого глифа. Если встроенный блок не содержит глифов, считается, что он содержит распорку (невидимый глиф шириной 0), в которой по умолчанию используется шрифт A и D

Затем для каждого символа определите начальный L, который будет добавлен, где L = «line-height» -HD. Половина межстрочного интервала добавляется выше H, а другая половина добавляется ниже D. Общая высота глифа и его межстрочный интервал над базовой линией составляет H ’= H + L / 2, а общая глубина D’ = D + L / 2.
(Поэтому, когда мы добавляем высоту строки к незаменяемым элементам в строке, по умолчанию возникает эффект центрирования текста по вертикали.)
Пример выглядит следующим образом:
L = ‘line-height’-HD> 0, полуразрыв строки добавляется к частям высоты и глубины соответственно.

Обратите внимание, что L может быть отрицательным

Примеры следующие:
В этом случае «line-height» - «font-size» <0, поэтому полупространство строки отрицательное, и соответствующие визуальные эффекты выглядят следующим образом:

Высота встроенного блока включает все глифы и интервал между строками с обеих сторон, который равен 'line-height'. Дочерний элементАтрибуты коробкиНе повлияет на высоту ряда
Пример:
На основе вышеприведенного примера, заполнение добавляется в span, но это не влияет на высоту строки родительского div.
Конечно, только атрибуты box (margin, padding . ) не будут влиять на это. Если вы добавите большую высоту строки к диапазону, это естественным образом изменит высоту строки родительского div.

Хотя границы, а также внутренние и внешние поля встроенного блока не участвуют в вычислении высоты строки, они все равно отображаются вокруг встроенного блока. Это означает, что если высота строки меньше, чем высота содержимого вмещающего блока, фон, внутренние и внешние поля будут перетекать в смежный линейный блок, в результате чего граница следующей линии будет отрисована на границе и тексте предыдущей строки (наложение)
Пример выглядит следующим образом:
На рисунке ниже высота строки составляет 80 пикселей, а фактическая высота блока содержимого, содержащего поле, составляет 160 пикселей, что означает, что последующие строки покрыты.

определение

Свойство вертикального выравнивания применяется только к встроенным элементам и влияет на вертикальное расположение встроенных элементов.
Встроенный незаменяющий элемент, блок, используемый для выравнивания, является блоком области содержимого, а именноБлок с высотой «line-height» (включая шрифт и интервал между строками с обеих сторон)；
Замените элемент и встроенный блок, блок для выравнивания - это поле поля (поле поля)

Общая ценность

baseline
baseline - это значение по умолчанию. Выровняйте базовую линию поля с базовой линией родительского блока. Если поле не имеет базовой линии (т.е.Встроенный блок без содержимого / базовый уровень в потокеИли замените элементы), просто выровняйте нижнюю границу границы с базовой линией родителя.
В следующем примере крайний левый черный X - это текст анонимного встроенного блока в контейнере блока, а нижний - базовая линия родителя.
Пример:

middle
выровняйте вертикальную среднюю точку блока с базовой линией родительского блока плюс половину высоты x родителя (Примечание: это вертикальная средняя точка прямоугольника, а не вертикальная средняя точка буквы）
Пример:
text-top
выровняйте верхнюю часть поля с верхом родительской области содержимого (Высота области содержимого встроенного блока определяется шрифтом）
text-bottom
выровняйте нижнюю часть поля по нижней части области содержимого родителя
Пример:
top
выравнивает верх поддерева выравнивания с верхом линейного блока
bottom
выравнивает нижнюю часть поддерева выравнивания с нижней частью линейного блока
Пример:
Разница между верхом / низом и текстовым верхом / текстовым основанием：
text-top / text-bottom располагается относительно родительской области содержимого, определенной родительским шрифтом,Не изменится, потому что линейный фрейм поднят другими элементами。
и top / bottom расположены относительно фактического линейного блока.
Укажите процент
Значение может быть отрицательным, а поле можно поднимать или опускать на соответствующее расстояние (в процентах от значения line-height). «0%» означает то же самое, что и «базовый уровень»
Указать длину
Поднимите или опустите поле на указанное расстояние. Значение «0 см» означает то же самое, что и «базовая линия»
Пример:
Один элемент увеличивается на 100px, а другой - на 100%, что очень интуитивно понятно.

Частный случай встроенного блока

Базовая линия встроенного блока обычно является базовой линией его последнего встроенного блока. Если в нем нет содержимого или блока потоковой линии, то базовая линия является границей нижнего поля.
Пример:

Читайте также: