Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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.

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é
Animableoui, comme un nombre, une longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

Spécification Statut 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é Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0[1] 1.0 (1.7 ou moins) 4.0[1] 7.0 1.0[1]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0[1] 1.0 (1) 6.0[1] 6.0 1.0[1]

[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

Étiquettes et contributeurs liés au document

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