css интервал между строками

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height : 2 устанавливает двойной интервал, а line-height : 1.5 — полуторный (пример 1).

Пример 1. Интерлиньяж в тексте

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста при разном межстрочном расстоянии

Значение line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em .

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

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

В CSS свойство line-height устанавливает высоту всей строки текста, поэтому разница между размером шрифта (font-size) и высотой строки ( line-height ) соответствует межстрочному интервалу. Увеличение значения свойства line-height приводит к увеличению расстояния между строками текста.

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

Примечание: по умолчанию во всех браузерах межстрочный интервал равен 120-125% от размера текущего шрифта. Использование отрицательных значений не допускается.

Для регулирования расстояний между словами используйте CSS свойство word-spacing, для изменения расстояния между буквами — letter-spacing.

Высота строки CSS

Чем отличается line-height от height или padding

padding — это отступ от height до границы элемента.

height: auto; (по умолчанию) — это

  1. height: 0;
  2. если присутствует текст, то сумма line-height всех строк [см. пример выше с расчётами]
  3. если есть дочерние элементы, то сумма их height , border , padding и margin

Изменить line-height:
Изменить height:

Расстояние между строк HTML

Междустрочный интервал можно узнать, если из line-height вычесть font-size . Причём значение межстрочного расстояния делится на два. Одна половина увеличивает отступ от буквы до верхнего края, другая — до нижнего. То есть получается, что текст располагается ровно по середине блока.

line-height наследуется от предка к потомку

Значение, заданное потомку, будет главнее того, что задано родителю.

Изменить line-height Зелёного потомка:
Изменить line-height Синего потомка:

Значение единственное, которое отталкивается от значения font-size элемента, а не от его родителя.

значение line-height в

line-height и HTML тег span

Элемент с display: inline; не может иметь height . Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.

Изменить line-height родителя:
Изменить line-height строчного потомка:

‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it . The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. [w3.org]

Иными словами, если font-size строчного элемента отличается от font-size блочного, то первый может увеличить высоту строки родителя, на которой он находится.

Изменить line-height:
Изменить font-size:

Оцените статью