Свойство CSS line-height
Свойство line-height задаёт высоту блочной области строки (line box), контролируя вертикальный интервал между строками текста. Оно ведёт себя по-разному в зависимости от типа элемента:
- На блочных элементах свойство
line-heightзадаёт минимальную высоту блочных областей строк внутри элемента. - На нереплейсированных (незаменяемых) строчных элементах свойство
line-heightзадаёт высоту, которая используется при расчёте высоты блочной области строки. - На реплейсированных (заменяемых) строчных элементах, таких как кнопки или другие элементы ввода, свойство
line-heightобычно не влияет на расчёт высоты блочной области строки.
INFO
Допускаются отрицательные значения.
INFO
Значение line-height по умолчанию составляет примерно 110–120% в большинстве браузеров.
Свойство line-height задаёт межстрочный интервал (leading) текста. Если значение line-height больше значения размера шрифта элемента, разница будет составлять межстрочный интервал.
| Начальное значение | normal |
|---|---|
| Применяется ко | Всем элементам. |
| Наследуется | Да. |
| Анимация | Да. Высота строк анимируется. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.lineHeight = "40px"; |
Синтаксис
Синтаксис свойства CSS line-height
line-height: normal | number | length | percentage | calc | initial | inherit;Пример со значением normal:
Пример свойства CSS line-height со значением normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: normal (default)</h3>
<div>This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Результат
Пример со значением length:
Пример свойства CSS line-height со значением px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 10px;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 10px</h3>
<div>This is a paragraph with a specified line-height.
<br /> The line height here is set to 10 pixels.
</div>
</body>
</html>Пример со значением percentage:
Пример свойства CSS line-height со значением %(проценты)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h2>line-height: 200%</h2>
<div>This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
</body>
</html>Пример с несколькими значениями:
Пример свойства CSS line-height со значениями cm, px, %(проценты), normal и number
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
line-height: 1;
}
div.b {
line-height: 50px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
div.e {
line-height: 200%;
}
div.f {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 1</h3>
<div class="a">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1.
</div>
<h3>line-height: 50px</h3>
<div class="b">This is a paragraph with a specified line-height.
<br /> The line height here is set to 50 pixels.
</div>
<h3>line-height: 0.5cm</h3>
<div class="c">This is a paragraph with a specified line-height.
<br /> The line height here is set to 0.5 centimeter.
</div>
<h3>line-height: 1cm</h3>
<div class="d">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1 centimeter.
</div>
<h3>line-height: 200%</h3>
<div class="e">This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
<h3>line-height: normal</h3>
<div class="f">This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Применение свойства line-height
Свойство line-height можно использовать для создания интересных визуальных стилей, управляя вертикальными отступами. Например, его можно комбинировать с linear-gradient(), чтобы задать каждой строке текста свой цвет, или использовать repeating-linear-gradient() для рисования линий между текстом. Обратите внимание, что line-height управляет только расстоянием, а за цвета отвечает градиент.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| normal | Задаёт нормальную высоту строки. Это значение по умолчанию. | Попробовать » |
| length | Задаёт фиксированную высоту строки в px, cm, em и т. д. | Попробовать » |
| number | Задаёт число, которое умножается на текущий размер шрифта для установки высоты строки. | Попробовать » |
| % | Задаёт высоту строки в процентах от текущего размера шрифта. | Попробовать » |
| calc | Задаёт высоту строки с помощью вычисления. | Попробовать » |
| initial | Заставляет свойство использовать значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Примечание: Для масштабируемых межстрочных интервалов широко рекомендуется использовать единицу em.
Практика
Что делает свойство 'line-height' в CSS?