line-height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété line-height définit la hauteur de la boîte d'une ligne.

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.

Exemple interactif

Syntaxe

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

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.

-moz-block-height Non standard

La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.

Définition formelle

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
Valeur calculéepour les valeurs en pourcentages ou en longueur, la longueur absolue, sinon, comme spécifié
Type d'animationeither number or length

Syntaxe formelle

line-height = 
normal |
<number [0,∞]> |
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

Exemples

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

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

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

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.

Spécifications

Specification
CSS Inline Layout Module Level 3
# line-height-property

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-height
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi