Propriété line-height

La propriété line-height définit l'espacement entre les lignes de texte (interligne).

La propriété ne spécifie pas l'espace entre les lignes de texte, comme on pourrait le penser, elle définit la hauteur de ligne de texte. Cela signifie que l'espace réel entre les lignes sera calculé comme suit : line-height - font-size = distance entre les lignes de texte. Ou inversement line-height = font-size + distance entre les lignes de texte.

Syntaxe

sélecteur {
	line-height: valeur;
}

Valeurs

Les valeurs de la propriété sont toutes les unités de taille. Lorsqu'une valeur est spécifiée en %, l'interligne sera un pourcentage de la taille de la police.

De plus, on peut spécifier n'importe quel nombre supérieur à zéro comme valeur. Dans ce cas, il est interprété comme un multiplicateur de la taille de la police. Par exemple, si font-size a la valeur 20px, et line-height - 1.5, alors c'est comme écrire line-height: 30px (20px * 1.5 = 30px).

Par défaut, la propriété a la valeur normal, dans ce cas le navigateur choisit l'interligne automatiquement.

Exemple

Dans cet exemple, la distance entre les lignes de texte sera line-height - font-size = 38px - 18px = 20px :

<p>
	some long text
</p>

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

Exemple

Réduisons l'espace à 25px - 18px = 7px :

<p>
	some long text
</p>

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

Exemple

Dans cet exemple, la distance entre les lignes de texte sera line-height - font-size = 18px - 18px = 0px - les lignes vont pratiquement coller (les jambages des lettres de la ligne supérieure toucheront les jambages des lettres de la ligne inférieure) :

<p>
	some long text
</p>

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

Exemple

Dans cet exemple, la valeur line-height - est un multiplicateur 1.5 de la taille de la police. Par conséquent, line-height sera équivalent à font-size * 1.5 = 18px * 1.5 = 27px. Et l'espace réel entre les lignes sera line-height - font-size = 27px - 18px = 9px :

<p>
	some long text
</p>

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

Exemple

Augmentons le multiplicateur :

<p>
	some long text
</p>

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

Exemple

Si on fait line-height inférieur à font-size, alors les lignes vont se chevaucher complètement :

<p>
	some long text
</p>

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