Міжрядковий інтервал на CSS

Давайте тепер навчимося встановлювати міжрядковий інтервал тексту. Під міжрядковим інтервалом мається на увазі відстань між лініями текст, тобто білий проміжок між ними. Для цього призначено властивість line-height, задає висоту лінії тексту.

При використанні властивості line-height вас може чекати деяка каверза: це властивість не задає проміжок між рядками тексту, як могло б здатися, а задає висоту лінії тексту.

Це означає, що реальний видимий проміжок між рядками обчислюватиметься так: line-height - font-size = видима відстань між рядками тексту.

У наступному прикладі відстань між рядками тексту буде 50px - 20px = 30px:

<p>
	довгий текст...
</p>

p {
	font-size: 20px;
	line-height: 50px;
	text-align: justify;
	width: 400px;
}

Нехай розмір шрифту для абзаців дорівнює 30px. Встановіть властивість line-height так, щоб видимий білий проміжок між абзацами дорівнював 15px.

Значення line-height без одиниць

Значення властивості line-height не обов'язково має бути число в деяких одиницях. Можна також просто написати число або дріб. У цьому випадку справжнє значення line-height можна буде знайти, помноживши його на значення font-size.

Наприклад, font-size дорівнює 10px, а line-height - 1.5. В цьому випадку реальне значення line-height буде 10px * 1.5 = 15px . Ну, а видимий білий проміжок між лініями тексту буде 5px: 15px - 10px = 5px.



Перевага такого способу завдання line-height
у тому, що при зміні розміру шрифту автоматично
змінюватиметься і міжрядковий інтервал.


	Подивимося застосування описаного на прикладі:


	<p>
	довгий текст...
</p>
	p {
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	width: 400px;
}

	
		:
	
	

	
Нехай розмір шрифту для абзаців дорівнює 30px.
Встановіть властивість line-height так,
щоб видимий білий проміжок між абзацами
дорівнював 15px. Використовуйте для цього
значення line-height без одиниць.