English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основы CSS

Модель коробки CSS

Основы CSS3

Референс-руководство CSS

Правила CSS (RULES)

Line-height CSS (Line-height)

Атрибут line-height CSSДля использованияМинимальная высота рамки, определенная для элемента. Она устанавливает spacing между двумя строками содержимого.

Этот атрибут defines количество пространства над и под инлайн-элементами. Он позволяет вам устанавливать высоту строки независимо от размера шрифта.

Значения высоты строки CSS

Значения атрибута line-height CSS должны использоваться вместе с атрибутом line-height CSS.

ЗначениеОписание
normalЭто значение по умолчанию. Оно specifies нормальную высоту.
numberЭтот атрибут specifies числовое значение, которое умножается на размер текущего шрифта для установки высоты строки.
lengthЭтот атрибут используется для установки высоты строки в px, pt, cm и т.д.
%Этот атрибут specifies высоту строки в процентах от текущего шрифта.
initialЭтот атрибут устанавливается в его значение по умолчанию.
inheritЭтот атрибут наследуется от родительского элемента.

Пример высоты строки CSS

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h3.small {  
    line-height: 70%;  
}  
h3.big {  
    line-height: 200%;  
}  
</style>  
</head>  
<body>  
<h3>  
Это заголовок с стандартным spacing между строками.<br>  
Это заголовок с стандартным spacing между строками.<br>  
В большинстве браузеровDefault spacing между строками составляет около 110% до 120%.<br>  
</h3>  
<h3 class="small">  
Это заголовок с малым интервалом между строками.<br>  
Это заголовок с малым интервалом между строками.<br>  
Это заголовок с малым интервалом между строками.<br>  
Это заголовок с малым интервалом между строками.<br>  
</h3>  
<h3 class="big">  
Это заголовок с большим интервалом между строками.<br>  
Это заголовок с большим интервалом между строками.<br>  
Это заголовок с большим интервалом между строками.<br>  
Это заголовок с большим интервалом между строками.<br>  
</h3>  
</body>  
</html>
Проверьте, посмотри на‹/›