line-height
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS line-height définit la hauteur d'une boîte de ligne dans les modes d'écriture horizontaux. Dans les modes d'écriture verticaux, elle définit la largeur d'une boîte de ligne. Elle est couramment utilisée pour définir la distance entre les lignes de texte. Sur les éléments de niveau bloc dans les modes d'écriture horizontaux, elle définit la hauteur préférée des boîtes de ligne dans l'élément, et sur les éléments en ligne non remplacés, elle définit la hauteur utilisée pour calculer la hauteur de la boîte de ligne.
Exemple interactif
line-height: normal;
line-height: 2.5;
line-height: 3em;
line-height: 150%;
line-height: 32px;
<section id="default-example">
<div class="transition-all" id="example-element">
Perdue dans les confins inexplorés de l'extrémité peu prisée du bras spiral
occidental de la Galaxie se trouve une petite étoile jaune ignorée.
</div>
</section>
#example-element {
font-family: "Georgia", serif;
max-width: 200px;
}
Syntaxe
/* Valeur avec un mot-clé */
line-height: normal;
/* S'il n'y a pas d'unité, cela représente un facteur multiplicateur de la taille de la police appliquée à l'élément */
line-height: 3.5;
/* Valeur de type <length> */
line-height: 3em;
/* Valeurs de type <percentage> */
line-height: 34%;
/* Valeurs globales */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;
La propriété line-height peut être définie par l'une des valeurs suivantes :
- un nombre (
<number>) - une longueur (
<length>) - un pourcentage (
<percentage>) - le mot-clé
normal.
Valeurs
normal-
Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de
font-family. <number>(sans unité)-
La valeur utilisée est sans unité (
<number>) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec<number>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définirline-heightet éviter les effets de l'héritage. <length>-
La valeur de longueur (
<length>) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page<length>. Les valeurs exprimées enempeuvent produire des résultats inattendus. <percentage>-
La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (
<percentage>) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées enem.
Accessibilité
Il est nécessaire d'utiliser une valeur minimale de 1.5 pour la propriété line-height lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | oui |
| Pourcentages | se rapporte à la taille de la police de l'élément lui-même |
| Valeur calculée | pour les valeurs en pourcentages ou en longueur, la longueur absolue, sinon, comme spécifié |
| Type d'animation | either number or length |
Syntaxe formelle
line-height =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Exemples
Exemple simple
/* Toutes les règles qui suivent
fourniront un résultat équivalent */
/* nombre/sans unité */
div {
line-height: 1.2;
font-size: 10pt;
}
/* longueur */
div {
line-height: 1.2em;
font-size: 10pt;
}
/* pourcentage */
div {
line-height: 120%;
font-size: 10pt;
}
/* raccourci de font */
div {
font:
10pt/1.2 "Bitstream Charter",
"Georgia",
serif;
}
Il est souvent plus pratique de définir line-height en utilisant la propriété raccourcie font comme montré ci-dessus, mais cela nécessite également de définir la propriété font-family.
Privilégier les valeurs sans unité pour line-height
Cet exemple montre pourquoi il vaut mieux utiliser des valeurs <number> plutôt que des valeurs <length>. Nous allons utiliser deux éléments HTML <div>. Le premier div, avec une bordure verte, utilise une valeur de line-height sans unité. Le second div, avec une bordure rouge, utilise une valeur de line-height définie en em.
HTML
<div class="box green">
<h1>
Éviter des résultats inattendus en utilisant une valeur sans unité pour
line-height
</h1>
Les valeurs de line-height en longueur et en pourcentage ont un comportement
d'héritage peu fiable…
</div>
<div class="box red">
<h1>
Éviter des résultats inattendus en utilisant une valeur sans unité pour
line-height
</h1>
Les valeurs de line-height en longueur et en pourcentage ont un comportement
d'héritage peu fiable…
</div>
<!-- La première hauteur pour <h1> est calculée à partir de sa propre hauteur (30px × 1.1) = 33px -->
<!-- La hauteur du deuxième <h1> est basée sur la hauteur du div (15px × 1.1) = 16.5px ... -->
CSS
.green {
line-height: 1.1;
border: solid limegreen;
}
.red {
line-height: 1.1em;
border: solid red;
}
h1 {
font-size: 30px;
}
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
Résultat
Espacer les lignes dans les modes d'écriture verticaux
La propriété line-height peut être utilisée pour ajuster l'espacement entre les lignes verticales dans les modes d'écriture verticaux.
.haiku {
border: 1px solid;
margin-bottom: 1rem;
padding: 0.5rem;
background-color: wheat;
writing-mode: vertical-rl;
}
.wide {
line-height: 2;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Inline Layout Module Level 3 # line-height-property |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
font,font-size - L'entrée de glossaire Interligne