Sur les éléments de bloc, la propriété line-height indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas remplacés, line-height indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.

/* Valeur avec un mot-clé */
line-height: normal;

/* Type <number> */
/* 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 longueur */
/* Type <length>      */
line-height: 3em;

/* Valeurs proportionnelles */
/* Type <percentage>        */
line-height: 34%;

/* Valeurs globales */
line-height: inherit;
line-height: initial;
line-height: unset;

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Pourcentagesse rapporte à la taille de la police de l'élément lui-même
Médiavisuel
Valeur calculéepour les valeurs en pourcentages ou en longueur, la longueur absolue, sinon, comme spécifié
Type d'animationeither number or length
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété line-height peut être définie grâce :

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>
La valeur utilisée est sans unité (type <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éfinir line-height et éviter les effets de l'héritage.
<length>
La valeur de longueur (type <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 en em peuvent 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 (type <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 en em.

Syntaxe formelle

normal | <number> | <length> | <percentage>

Exemples

/* Toutes les règles qui suivent 
   fourniront un résultat équivalent */

div { line-height: 1.2;   font-size: 10pt }   /* number */ 
div { line-height: 1.2em; font-size: 10pt }   /* length */ 
div { line-height: 120%;  font-size: 10pt }   /* percentage */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

Notes

  • Plus souvent, on utilisera la propriété raccourcie font plutôt que line-height. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété font-family.

Gestion de l'héritage et valeurs sans unité

Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type <number> plutôt que des valeurs de longueur (type <length>.

On utilisera deux éléments <div>. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur

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;
}

HTML

<div class="box green">
 <h1>Avoid unexpected results by using unitless line-height</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
 <h1>Avoid unexpected results by using unitless line-height</h1>
  length and percentage line-heights have poor inheritance behavior ...
</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 ... -->

Résultat

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'line-height' dans cette spécification.
Version de travail line-height peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'line-height' dans cette spécification.
Recommendation Aucun changement.
CSS Level 1
La définition de 'line-height' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1121471
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple1 Oui124661

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,