Proprietà line-height

La proprietà line-height imposta l'intervallo tra le righe di testo (interlinea).

La proprietà non imposta lo spazio tra le righe di testo, come potrebbe sembrare, ma imposta l'altezza della linea di testo. Ciò significa che lo spazio reale tra le righe sarà calcolato così: line-height - font-size = distanza tra le righe di testo. O viceversa line-height = font-size + distanza tra le righe di testo.

Sintassi

selettore {
	line-height: valore;
}

Valori

I valori della proprietà possono essere qualsiasi unità per dimensioni. Se si specifica un valore in % l'interlinea sarà in percentuale alla dimensione del font.

Inoltre, è possibile specificare qualsiasi numero maggiore di zero. In questo caso viene interpretato come un moltiplicatore della dimensione del font. Ad esempio, se font-size ha valore 20px, e line-height - 1.5, allora è come scrivere line-height: 30px (20px * 1.5 = 30px).

Per impostazione predefinita la proprietà ha valore normal, in questo caso il browser sceglie l'interlinea automaticamente.

Esempio

In questo esempio la distanza tra le righe di testo sarà line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Esempio

Riduciamo lo spazio a 25px - 18px = 7px:

<p>
	some long text
</p>

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

Esempio

In questo esempio la distanza tra le righe di testo sarà line-height - font-size = 18px - 18px = 0px - le righe praticamente si toccheranno (le code delle lettere della riga superiore toccheranno le code delle lettere di quella inferiore):

<p>
	some long text
</p>

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

Esempio

In questo esempio il valore line-height - è un moltiplicatore 1.5 della dimensione del font. Di conseguenza line-height sarà equivalente a font-size * 1.5 = 18px * 1.5 = 27px. E lo spazio reale tra le righe sarà line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Esempio

Aumentiamo il moltiplicatore:

<p>
	some long text
</p>

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

Esempio

Se si imposta line-height minore di font-size, le righe si sovrapporranno:

<p>
	some long text
</p>

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