Proprietatea line-height

Proprietatea line-height stabilește spațiul dintre liniile de text (spațierea interlinie).

Proprietatea nu stabilește distanța dintre liniile de text, așa cum ar părea la prima vedere, ci stabilește înălțimea liniei de text. Aceasta înseamnă că distanța reală dintre linii va fi calculată astfel: line-height - font-size = distanța dintre liniile de text. Sau invers line-height = font-size + distanța dintre liniile de text.

Sintaxă

selector {
	line-height: valoare;
}

Valori

Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni. Când se specifică o valoare în %, spațiul interlinie va fi în procente din dimensiunea fontului.

În plus, se poate specifica orice număr mai mare decât zero. În acest caz, acesta este perceput ca un multiplicator al dimensiunii fontului. De exemplu, dacă font-size are valoarea 20px, iar line-height - 1.5, atunci aceasta este echivalent cu a scrie line-height: 30px (20px * 1.5 = 30px).

În mod implicit, proprietatea are valoarea normal, în acest caz browserul alege spațiul interlinie automat.

Exemplu

În acest exemplu, distanța dintre liniile de text va fi line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Exemplu

Să micșorăm distanța la 25px - 18px = 7px:

<p>
	some long text
</p>

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

Exemplu

În acest exemplu, distanța dintre liniile de text va fi line-height - font-size = 18px - 18px = 0px - liniile practic se vor lipi (cozile literelor din linia superioară vor atinge cozile literelor din linia inferioară):

<p>
	some long text
</p>

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

Exemplu

În acest exemplu, valoarea line-height este un multiplicator 1.5 față de dimensiunea fontului. Prin urmare, line-height va fi echivalent cu font-size * 1.5 = 18px * 1.5 = 27px. Iar distanța reală dintre linii va fi line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Exemplu

Să mărim multiplicatorul:

<p>
	some long text
</p>

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

Exemplu

Dacă se face line-height mai mic decât font-size, atunci liniile se vor suprapune:

<p>
	some long text
</p>

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