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

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

p ( line-height: 1.5; )

line-heightСвойство может принимать значения ключевых слов normalили none, а также количество, длину, или процент.

Согласно спецификации, значение «нормальный» - это не просто одно конкретное значение, которое применяется ко всем элементам, а скорее вычисляется до «разумного» значения в зависимости от размера шрифта, установленного (или унаследованного) для элемента.

Значение длины может быть определено с использованием любой допустимой единицы CSS (px, em, rem и т. Д.).

Процентное значение - это размер шрифта элемента, умноженный на процент. Например:

Посмотрите на эту ручку!

В приведенной выше демонстрации для трех абзацев высота строки установлена на 150%, 200% и 250% соответственно. Размер шрифта основного элемента составляет 20 пикселей. Это означает, что вычисленная высота строки для абзацев составляет 30 пикселей, 40 пикселей и 50 пикселей соответственно.

Безразмерная высота линии

Рекомендуемый метод определения высоты строки - использование числового значения, называемого высотой строки «без единиц измерения». Числовое значение может быть любым числом, включая десятичное число, как используется в первом примере кода на этой странице.

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