line-height
Définit la hauteur de chaque ligne de texte, l’espacement entre les lignes.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- oui, en tant que nombre ou longueur
- S’applique à
- tous les éléments
- JavaScript
element.style.lineHeight = "1.6"
Exemple
#body {
line-height: 1.6;
}
h1 {
line-height: 1.15;
}<h1 style="line-height: 1.15; margin: 0 0 8px; font-size: 26px;">Un titre sur deux lignes reste compact</h1>
<p style="line-height: 1.6; margin: 0;">Le texte du paragraphe a un interligne plus grand, ce qui permet de lire confortablement un passage long aussi bien sur téléphone que sur ordinateur.</p>Définition et utilisation
#La propriété line-height détermine la hauteur de chaque ligne de texte. L’espace libre se répartit également au-dessus et au-dessous des caractères, donc une valeur plus grande donne des lignes plus espacées.
Le mieux est de la donner sous forme de nombre sans unité, par exemple 1.6. Cette valeur est alors multipliée par la taille de police de chaque élément séparément. Les valeurs avec une unité (24px, 1.5em) sont calculées une seule fois et héritées comme un nombre fixe de pixels, ce qui perturbe l’espacement dans les éléments ayant une police différente.
Pour du texte courant, 1.5-1.7 fonctionne bien, et pour les grands titres, des valeurs plus petites, par exemple 1.1-1.2.
Syntaxe
#line-height: normal | <nombre> | <longueur> | <pourcentage>;Valeurs
#Valeurs en pratique
#normal
.demo { line-height: normal; }1
.demo { line-height: 1; }1.6
.demo { line-height: 1.6; }2.2
.demo { line-height: 2.2; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Donnez
line-heightsous forme de nombre sans unité. Vous éviterez des lignes trop serrées dans les éléments ayant une police plus grande. - Centrer une seule ligne de texte dans un bouton avec un
line-heightégal à la hauteur fonctionne, mais Flexbox ou Grid sont plus sûrs.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.