Свойства CSS

Меню

line-height

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

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

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

В CSS свойство line-height устанавливает высоту всей строки текста, поэтому разница между размером шрифта (font-size) и высотой строки (line-height) соответствует межстрочному интервалу. Увеличение значения свойства line-height приводит к увеличению расстояния между строками текста.

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

Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.

Для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между буквами - letter-spacing.

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.lineHeight="2"

Синтаксис

line-height: normal|число|высота|inherit;

Значения свойства

Значение Описание
normal Стандартный межстрочный интервал.
число Число, которое будет умножено на текущий размер шрифта для определения межстрочного интервала.
высота Высота задается с помощью единиц измерения, используемых в CSS.
% Высота межстрочного интервала в процентах от текущего размера шрифта.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:
line-height:
Результат:

Пример демонстрирует, как с помощью свойства line-height можно изменять расстояние между строк текста.

CSS Код:
div {
line-height: normal;
}
Кликните на любое значение свойства, чтобы увидеть результат