Как сделать межстрочный интервал в css

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

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

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

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

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

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

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

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

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

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

Межстрочный интервал (интерлиньяж) — важный пункт при работе с текстом. Данный параметр определяет, сколько пространства будет между строчками.

Текст с размером шрифта 14 пикселей и межстрочным интервалом 14 пикселей

Текст с размером шрифта 14 пикселей и межстрочным интервалом 21 пикселей

Заметьте, что левый текст труднее читать. Это связано с тем, что глаза не «цепляются» за строку и взгляд постоянно переходит с одной строки на другую и обратно.

Для установки межстрочного расстояния используется правило line-height . В качестве значения используется число.

Задание

Добавьте в редактор параграф с классом line-height с размером шрифта 24 пикселя и межстрочным интервалом 36 пикселей. Стили добавьте в тег style .

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

Свойство CSS line-height

Свойство CSS line-height отвечает за расстояние между строками. Иногда это свойство называют интерлиньяжем.

Синтаксис CSS line-height

Где value может принимать

  • normal — константа, которая означает стандартное межстрочное расстояние
  • Простые вещественные значения (1.0, 0.4, 1.3 — это коэффициент множителя относительно стандартного расстояния между строками)
  • Значение в пикселях (1px, 20px)
  • Значение в пунктах pt (1.0pt, 1.2pt)
  • Значение в единицах em (0.5em, 0.2em)
  • Значение в процентах

В зависимости от шрифта и его размера межстрочный интервал разный. В Microsoft установили стандарт: line-height:1.2em

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

Пример. Различные варианты задания межстрочного интервала

На странице преобразуется в следующее

Пример 1. Какой-то текст. line-height:1.0
Какой-то текст

Пример 2. Какой-то текст. line-height:0.5
Какой-то текст

Пример 3. Какой-то текст. line-height:2.0
Какой-то текст

Пример 4. Какой-то текст. line-height:12px
Какой-то текст

Лучшие выбирать относительные интервалы от 1.5 до 2.5 (или в процентах 150%..250%). При таком интервале текст лучше читается, а интервал привязан к размеру шрифта.

Для обращения к line-height из JavaScript нужно писать следующую конструкцию:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *