line-height

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. Pour les éléments en ligne remplacés (par exemple <input>), line-height n'a aucun effet.

Syntaxe

/* 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;

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>.

<percentage>

La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage 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 { line-height: 12pt;  font-size: 10pt }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

Notes

• Plus souvent, on utilisera la propriété raccourcie font plutôt que line-height.

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

Compatibilité des navigateurs

[1] Trident et Webkit ne gèrent pas correctement le cas des éléments en ligne qui sont remplacés (par exemple les boutons). Dans certains cas, line-height aura un effet sur eux, ce qui ne correspond pas aux règles énoncées par la spécification.

Voir aussi

• font
• font-size