Свойство CSS line-height
Свойство CSS line-height отвечает за расстояние между строками. Иногда это свойство называют интерлиньяжем.
Синтаксис CSS line-height
Где value может принимать
- normal — константа, которая означает стандартное межстрочное расстояние
- Простые вещественные значения (1.0, 0.4, 1.3 — это коэффициент множителя относительно стандартного расстояния между строками)
- Значение в пикселях (1px, 20px)
- Значение в пунктах pt (1.0pt, 1.2pt)
- Значение в единицах em (0.5em, 0.2em)
- Значение в процентах
В зависимости от шрифта и его размера межстрочный интервал разный. В Microsoft установили стандарт: line-height:1.2em
Межстрочный интервал CSS на сайте html
Пример. Различные варианты задания межстрочного интервала
На странице преобразуется в следующее
Пример 1. Какой-то текст. line-height:1.0
Какой-то текст
Пример 2. Какой-то текст. line-height:0.5
Какой-то текст
Пример 3. Какой-то текст. line-height:2.0
Какой-то текст
Пример 4. Какой-то текст. line-height:12px
Какой-то текст
Лучшие выбирать относительные интервалы от 1.5 до 2.5 (или в процентах 150%..250%). При таком интервале текст лучше читается, а интервал привязан к размеру шрифта.
Для обращения к line-height из JavaScript нужно писать следующую конструкцию:
line-height¶
Свойство line-height для блочных элементов определяет минимальную высоту строки текста.
Для внедряемых строчных элементов (вроде <img> ) свойство line-height не оказывает никакого эффекта.
Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.
Синтаксис¶
Значения¶
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.
Межстрочный интервал на CSS
Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height , задающее высоту линии текста.
При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.
Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height — font-size = видимое расстояние между строками текста.
В следующем примере расстояние между строками текста будет 50px — 20px = 30px :
Пусть размер шрифта для абзацев равен 30px . Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px .
Значение line-height без единиц
Значением свойства line-height не обязательно должно служить число в некоторых единицах. Можно также просто написать число или дробь. В этом случае настоящее значение line-height можно будет найти, умножив его на значение font-size .
К примеру, font-size равен 10px , а line-height — 1.5 . В этом случае реальное значение line-height будет 10px * 1.5 = 15px . Ну, а видимый белый промежуток между линиями текста будет 5px : 15px — 10px = 5px .
Преимущество такого способа задания line-height в том, что при изменении размера шрифта автоматически будет меняться и межстрочный интервал.
Посмотрим применение описанного на примере:
Пусть размер шрифта для абзацев равен 30px . Установите свойство line-height так, чтобы видимый белый промежуток между абзацами был равен 15px . Используйте для этого значение line-height без единиц.
line-height
Свойство CSS line-height устанавливает высоту строки. Обычно он используется для установки расстояния между строками текста. В элементах уровня блока он определяет минимальную высоту строчных полей внутри элемента. На не- замененных встроенных элементов, она определяет высоту , которая используется для расчета линии высоты коробки.
Try it
Syntax
Свойство line-height указывается как одно из следующих:
- a <number>
- a <length>
- a <percentage>
- ключевое слово normal .
Values
Зависит от пользовательского агента. Настольные браузеры (включая Firefox) используют значение по умолчанию примерно 1.2 , в зависимости от семейства font-family элемента .
Используемое значение — это <number> единиц измерения, умноженное на собственный размер шрифта элемента. Вычисленное значение совпадает с указанным <number> . В большинстве случаев это предпочтительный способ установить line-height и избежать неожиданных результатов из-за наследования.
Указанная <length> используется при расчете высоты строки строки. Значения, указанные в единицах em, могут привести к неожиданным результатам (см. Пример ниже).
Относительно размера шрифта самого элемента. Вычисленное значение — это <percentage> умноженный на вычисленный размер шрифта элемента. Значения в процентах могут привести к неожиданным результатам (см. Второй пример ниже).
Устанавливает высоту линии в соответствии с высотой содержимого текущего блока.
Accessibility concerns
Используйте минимальное значение 1.5 для line-height для содержимого основного абзаца. Это поможет людям с плохим зрением, а также людям с когнитивными проблемами, такими как дислексия. Если страница увеличена для увеличения размера текста, использование значения без единиц измерения гарантирует, что высота линии будет пропорционально масштабироваться.