тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

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

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

Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height - font-size = видимое расстояние между строками текста.

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

<p> длинный текст... </p> p { font-size: 20px; line-height: 50px; text-align: justify; width: 400px; }

:

Пусть размер шрифта для абзацев равен 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: line-height - font-size = 15px - 10px = 5px.

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

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

<p> длинный текст... </p> p { font-size: 20px; line-height: 1.5; text-align: justify; width: 400px; }

:

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