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

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


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

При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.

Это значит, что реальный видимый промежуток между строками будет вычисляться так:

line-height - font-size = видимое расстояние между строками текста.

В следующем примере расстояние между строками текста будет 50px - 20px = 30px:

\<p>
длинный текст...
\</p>

p {
font-size: 20px;
line-height: 50px;
text-align: justify;
width: 400px;
}

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

Посмотрим применение описанного на примере:

\<p>
длинный текст...
\</p>

p {
font-size: 20px;
line-height: 1.5;
text-align: justify;
width: 400px;
}

Источник: