Categories: CSS

Обзор свойства line-height в CSS-стилях

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

Но, прежде чем мы начнем рассматривать свойство line-height более детально, мы должны дать пояснение двум важным моментам: область содержимого элемента (content-area) и коробка строки (line-box).

 

Область содержимого элемента (content-area) – это вычисленная высота области содержимого элемента. На размер области содержимого влияют такие свойства, как box-sizing, width, min-width, max-width, height, min-height и max-height. Вы можете представить себе область содержимого как область, которая содержит текст или графические элементы, для которых суммируются все вышеуказанные свойства.

Коробка строки (line-box). Каждая строка состоит из одного или нескольких встроенных элементов (HTML-тегов). Высота коробки строки зависит от высоты своих потомков. Браузер вычисляет высоту для каждого встроенного элемента и, следовательно, высоту строки (от самой высокой точки ее потомка до самой нижней точки ее потомка). Поэтому, коробка строки всегда имеет достаточную высоту, чтобы вместить все ее дочерние элементы (по умолчанию). Каждый элемент HTML представляет из себя набор таких «коробок». Если вы знаете высоту каждой коробки строки, тогда вы будете знать высоту этого элемента.

 

И одним из свойств, которые влияют на высоту коробки строки, является line-height (т.е., высота строки). Поскольку высота строки может быть выше высоты области содержимого, представьте себе свойство line-height как свойство, которое определяет виртуальную высоту элемента. Виртуальную, поскольку пространство, которое выше области содержимого, является невидимым.

Графически это можно представить так:

 

Высота области содержимого, кроме прочего, определяется размером шрифта.

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

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

Исходя из общего вычисленного значения, высота строки (виртуальная область) может быть равной, большей или меньшей, чем область содержимого. Если значение высоты строки меньше, тогда направляющая имеет отрицательное значение, а коробка строки становится визуально меньше своих дочерних элементов.

 

Встроенные элементы, на которые влияют эти правила:

  • замененные встроенные элементы (<img>, <input>, <svg> и т. д.)
  • блоки со свойством inline-block
  • встроенные элементы, которые участвуют в конкретном контексте форматирования (например, в элементе flexbox все flex элементы блокируются)

Для этих конкретных встроенных элементов высота вычисляется на основе их значений height, margin и border. Если значение для height установлено в auto, тогда используется line-height, а область содержимого становится строго равной высоте строки.

 

 

Теперь осталось разобраться с проблемой, каково должно быть нормальное значение line-height? Не рекомендуется использовать line-height: 1; поскольку единичные значения (безразмерные) являются относительными по размеру шрифта, а не относительными по отношению к области содержимого. И очень часто это приводит к тому, что высота строки (виртуальная область) будет меньшей за область содержимого.

 

Если проанализировать шрифты из Google Web Fonts, то мы увидим, что более 90% из них имеют высоту строки (line-height) больше, чем 1. Поэтому, желательно использовать немного большие значения за 1.

 

Дополнительные сведения о вычислении коробки строки:

  • для встроенных элементов, padding и border увеличивают область фона, но не высоту области содержимого (и не высоту коробки строки). Поэтому область содержимого не всегда такова, какой она выглядит на экране. Свойства margin-top и margin-bottom не имеют влияния.
  • для замененных встроенных элементов (<img>, <input>, <svg> и т. д.), блоков с inline-block: padding, margin и border увеличивают height, а значит и высоту области содержимого и высоту коробки строки.

 

Recent Posts

Чем отличается маршрутизатор от точки доступа и репитера?

Стабильное и быстрое интернет-соединение – важный критерий качества современной жизни. Если вы решили купить бытовую…

2 дня ago

SQL-инъекции: теоретическая часть необходимых знаний

Защита сайта от хакеров, ботов и онлайн-уязвимостей – это многогранная и кропотливая работа. А среди…

4 дня ago

Надоедливая ошибка _load_textdomain_just_in_time в WordPress

Сегодня рассмотрим практический кейс по борьбе с надоедливой ошибкой, с которой часто сталкиваются программисты WordPress…

5 дней ago

Харуки Мураками

Если есть достойная цель, то она упрощает наше существование Харуки Мураками  

6 дней ago

Помощь при выборе и покупке электрогенератора в Украине

В современном мире, где стабильность электроснабжения является ключевым фактором комфорта и бесперебойной работы, наличие надежного…

1 неделя ago

Уоррен Баффетт

Даже если вы очень талантливы и прилагаете большие усилия, для некоторых результатов просто нужно время:…

2 недели ago