Właściwość line-height

Właściwość line-height ustawia odstęp między wierszami tekstu (interlinia).

Właściwość nie ustawia bezpośrednio odstępu między wierszami tekstu, jak mogłoby się wydawać, lecz ustawia wysokość linii tekstu. Oznacza to, że rzeczywisty odstęp między wierszami będzie obliczany następująco: line-height - font-size = odległość między wierszami tekstu. Lub odwrotnie line-height = font-size + odległość między wierszami tekstu.

Składnia

selektor {
	line-height: wartość;
}

Wartości

Wartościami właściwości są dowolne jednostki wymiaru. Przy podaniu wartości w % interlinia będzie wyrażona w procentach wielkości czcionki.

Ponadto, można ustawić wartość jako dowolną liczbę większą od zera. W tym przypadku jest ona interpretowana jako mnożnik wielkości czcionki. Na przykład, jeśli font-size ma wartość 20px, a line-height - 1.5, to jest to równoważne zapisaniu line-height: 30px (20px * 1.5 = 30px).

Domyślnie właściwość ma wartość normal, w tym przypadku przeglądarka automatycznie dobiera interlinie.

Przykład

W tym przykładzie odległość między wierszami tekstu wyniesie line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Przykład

Zmniejszmy odstęp do 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Przykład

W tym przykładzie odległość między wierszami tekstu wyniesie line-height - font-size = 18px - 18px = 0px - wiersze praktycznie się zleją (ogonek litery w górnym wierszu będzie dotykał ogonka litery w dolnym wierszu):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Przykład

W tym przykładzie wartość line-height - mnożnik 1.5 wielkości czcionki. Zatem line-height będzie równoważny font-size * 1.5 = 18px * 1.5 = 27px. A rzeczywisty odstęp między wierszami wyniesie line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Przykład

Zwiększmy mnożnik:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Przykład

Jeśli ustawić line-height mniejszy niż font-size, to wiersze nałożą się na siebie:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}