Перейти к содержанию

line-height

Свойство line-height для блочных элементов определяет минимальную высоту строки текста.

Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта.

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

Демо

Шрифт и Цвет

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
    by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.

normal

Расстояние между строк вычисляется автоматически.

Значение по-умолчанию:

1
line-height: normal;

Применяется ко всем элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>line-height</title>
        <style>
            h1 {
                line-height: 70%;
            }
            p {
                line-height: 1.5;
            }
        </style>
    </head>
    <body>
        <h1>
            Нормальный постулат: алгебра или наибольшее и
            наименьшее значения функции?
        </h1>
        <p>
            Эпсилон окрестность, исключая очевидный случай,
            поддерживает комплексный интеграл по бесконечной
            области.
        </p>
    </body>
</html>

Комментарии