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

css-свойство line-height (от англ. line height – высота строки) используется для установки межстрочного интервала (расстояния между строками).

Характеристики

Значение по умолчанию: normal.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: да.
JavaScript: object.style.lineHeight="value".

Синтаксис

line-height: <множитель> | <размер> | <проценты> | normal

Значения

normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от браузера составляет около 120-125% от текущего размера шрифта.
множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения межстрочного интервала.
размер – задает расстояние между строк в любых единицах измерения (смотреть), использующихся в CSS.
проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта.

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-line-height

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/line-height

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		margin: 5em;
		}
		
		.p_1{
		line-height: 2.5em;
		}
		
		.p_2{
		line-height: 2.5;
		}
		
		.p_3{
		line-height: 250%;
		}		
		
	</style>
	
</head>
<body>

	<p>
		line-height: normal<br>
		Вторая строка абзаца<br>
		Третья строка абзаца
	</p>

	<p class="p_1">
		line-height: 2.5em<br>
		Вторая строка абзаца<br>
		Третья строка абзаца
	</p>
	
	<p class="p_2">
		line-height: 2.5<br>
		Вторая строка абзаца<br>
		Третья строка абзаца
	</p>
	
	<p class="p_3">
		line-height: 250%<br>
		Вторая строка абзаца<br>
		Третья строка абзаца
	</p>	
	
</body>
</html>

Пример №1