Propriété CSS line-height
La propriété line-height spécifie la hauteur d'une boîte de ligne, contrôlant l'espacement vertical entre les lignes de texte. Elle se comporte différemment selon le type d'élément :
- Sur les éléments de niveau bloc, la propriété
line-heightspécifie la hauteur de ligne minimale des boîtes de ligne dans l'élément. - Sur les éléments en ligne non remplacés, la propriété
line-heightspécifie la hauteur utilisée pour le calcul de la hauteur de la boîte de ligne. - Sur les éléments en ligne remplacés tels que les boutons ou d'autres éléments input, la propriété
line-heightn'affecte généralement pas le calcul de la hauteur de la boîte de ligne.
INFO
Les valeurs négatives sont valides.
INFO
La valeur par défaut de line-height est d'environ 110 % à 120 % pour la majorité des navigateurs.
La propriété line-height définit l'interligne d'un texte. Si la valeur de line-height est supérieure à la valeur de font-size d'un élément, la différence correspondra à l'interligne du texte.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Oui. |
| Animable | Oui. La hauteur des lignes est animable. |
| Version | CSS1 |
| Syntaxe DOM | object.style.lineHeight = "40px"; |
Syntaxe
Syntaxe de la propriété CSS line-height
line-height: normal | number | length | percentage | calc | initial | inherit;Exemple avec la valeur normal :
Exemple de la propriété CSS line-height avec la valeur normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: normal (default)</h3>
<div>This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Résultat
Exemple avec la valeur length :
Exemple de la propriété CSS line-height avec une valeur en px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 10px;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 10px</h3>
<div>This is a paragraph with a specified line-height.
<br /> The line height here is set to 10 pixels.
</div>
</body>
</html>Exemple avec la valeur percentage :
Exemple de la propriété CSS line-height avec une valeur en %(pourcentage)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h2>line-height: 200%</h2>
<div>This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
</body>
</html>Exemple avec plusieurs valeurs :
Exemple de la propriété CSS line-height avec des valeurs en cm, px, %(pourcentage), normal et nombre
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
line-height: 1;
}
div.b {
line-height: 50px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
div.e {
line-height: 200%;
}
div.f {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 1</h3>
<div class="a">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1.
</div>
<h3>line-height: 50px</h3>
<div class="b">This is a paragraph with a specified line-height.
<br /> The line height here is set to 50 pixels.
</div>
<h3>line-height: 0.5cm</h3>
<div class="c">This is a paragraph with a specified line-height.
<br /> The line height here is set to 0.5 centimeter.
</div>
<h3>line-height: 1cm</h3>
<div class="d">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1 centimeter.
</div>
<h3>line-height: 200%</h3>
<div class="e">This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
<h3>line-height: normal</h3>
<div class="f">This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Utilisation de la propriété line-height à différentes fins
La propriété line-height peut être utilisée pour créer des styles visuels intéressants en contrôlant l'espacement vertical. Par exemple, vous pouvez la combiner avec un linear-gradient() pour donner une couleur différente à chaque ligne de texte, ou utiliser repeating-linear-gradient() pour tracer des lignes entre le texte. Notez que line-height ne contrôle que l'espacement, tandis que le dégradé gère les couleurs.
Valeurs
| Valeur | Description | Tester |
|---|---|---|
| normal | Définit une hauteur de ligne normale. C'est la valeur par défaut de cette propriété. | Tester » |
| length | Définit une hauteur de ligne fixe en px, cm, em, etc. | Tester » |
| number | Définit un nombre qui est multiplié par la taille de police actuelle pour définir la hauteur de ligne. | Tester » |
| % | Définit une hauteur de ligne en pourcentage de la taille de police actuelle. | Tester » |
| calc | Définit une hauteur de ligne à l'aide d'un calcul. | Tester » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Remarque : L'utilisation de l'unité em est largement recommandée pour les hauteurs de ligne évolutives.
Pratique
Que fait la propriété 'line-height' en CSS ?