W3docs
fr
Se connecter

Propriété CSS line-height

Utilisez la propriété CSS line-height pour définir la hauteur des lignes de texte. Définition, valeurs et exemples.

La propriété line-height spécifie la hauteur d'une boîte de ligne, contrôlant l'espacement vertical entre les lignes de texte. C'est l'une des propriétés les plus importantes pour la lisibilité : des lignes trop serrées sont difficiles à parcourir, tandis que des lignes trop espacées donnent l'impression que le paragraphe est décousu.

Cette page couvre la syntaxe, chaque type de valeur accepté, pourquoi les valeurs sans unité sont généralement le meilleur choix, ainsi que les pièges liés à l'accessibilité et à l'héritage.

line-height se comporte différemment selon le type d'élément :

  • Sur les éléments de niveau bloc, la propriété line-height définit la hauteur de ligne minimale des boîtes de ligne à l'intérieur de l'élément.
  • Sur les éléments inline non remplacés, elle définit la hauteur utilisée dans le calcul de la hauteur de la boîte de ligne.
  • Sur les éléments inline remplacés tels que les boutons ou d'autres éléments input, line-height n'affecte généralement pas le calcul de la hauteur de la boîte de ligne.
Info

Les valeurs négatives sont valides.

Info

La hauteur de ligne par défaut est d'environ 110 % à 120 % pour la majorité des navigateurs.

La propriété line-height définit l'interligne des lignes d'un texte. Si la valeur de line-height est supérieure à la valeur font-size d'un élément, la différence constituera l'interligne du texte.

Valeur initialenormal
S'applique àTous les éléments.
HéritéOui.
AnimatableOui. La hauteur des lignes est animatable.
VersionCSS1
Syntaxe DOMobject.style.lineHeight = "40px";

Syntaxe

Syntaxe de la propriété CSS line-height

line-height: normal | number | length | percentage | calc | initial | inherit;

Exemple avec la valeur normal :

Exemple de la propriété CSS line-height avec la valeur normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: normal (default)</h3>
    <div>This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>
Essayez vous-même »

Résultat

Paragraphe rendu avec la valeur line-height normale par défaut dans un navigateur

Exemple avec la valeur length :

Exemple de la propriété CSS line-height avec la valeur px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 10px</h3>
    <div>This is a paragraph with a specified line-height.
      <br /> The line height here is set to 10 pixels.
    </div>
  </body>
</html>
Essayez vous-même »

Exemple avec la valeur percentage :

Exemple de la propriété CSS line-height avec la valeur %(pourcentage)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h2>line-height: 200%</h2>
    <div>This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
  </body>
</html>
Essayez vous-même »

Exemple avec plusieurs valeurs :

Exemple de la propriété CSS line-height avec les valeurs cm, px, %(pourcentage), normal et number

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        line-height: 1;
      }
      div.b {
        line-height: 50px;
      }
      div.c {
        line-height: 0.5cm;
      }
      div.d {
        line-height: 1cm;
      }
      div.e {
        line-height: 200%;
      }
      div.f {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 1</h3>
    <div class="a">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 50 pixels.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 0.5 centimeter.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1 centimeter.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>
Essayez vous-même »

Choisir une valeur : sans unité ou avec unité

C'est la décision la plus importante lors de la définition de line-height, et elle se résume à la façon dont la valeur est héritée :

  • Un nombre sans unité (par ex. line-height: 1.5) est hérité en tant que facteur lui-même. Chaque descendant multiplie ce facteur par sa propre font-size, de sorte que l'espacement s'adapte toujours correctement.
  • Une longueur ou un pourcentage (par ex. 1.5em ou 150%) est calculé une seule fois sur l'élément où il est déclaré, et la valeur en pixels résultante est héritée. Les descendants ayant une font-size différente conservent cette hauteur en pixels fixe, ce qui peut provoquer un chevauchement du texte.

Comparez les deux sur un parent dont l'enfant a une police plus grande :

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Recommended: each element scales the factor by its own font-size */
      .good { line-height: 1.5; }
      /* Problematic: computed pixel height is inherited as-is */
      .bad  { line-height: 150%; }
      .child { font-size: 3em; }
    </style>
  </head>
  <body>
    <div class="good">
      Parent text. <span class="child">Big inherited line scales fine.</span>
    </div>
    <div class="bad">
      Parent text. <span class="child">Big inherited line may overlap.</span>
    </div>
  </body>
</html>

Règle générale : utilisez un nombre sans unité pour le texte courant. Optez pour une longueur fixe (px/em) uniquement lorsque vous souhaitez délibérément une boîte de ligne constante, par exemple pour centrer verticalement une seule ligne de texte en faisant correspondre line-height à la hauteur de l'élément.

Accessibilité

Le critère de succès de l'espacement du texte WCAG 1.4.12 attend que le contenu reste lisible lorsque les utilisateurs augmentent l'interligne à au moins 1,5 fois la taille de police. Un line-height sans unité de 1.5 ou plus sur le texte courant constitue une valeur par défaut sûre et accessible, et évite de casser les mises en page lorsqu'un utilisateur applique son propre espacement.

Valeurs

ValeurDescriptionEssayer
normalDéfinit une hauteur de ligne normale. C'est la valeur par défaut de cette propriété.Essayer »
lengthDéfinit une hauteur de ligne fixe en px, cm, em, etc.Essayer »
numberDéfinit un nombre qui est multiplié par la taille de police actuelle pour définir la hauteur de ligne.Essayer »
%Définit une hauteur de ligne en pourcentage de la taille de police actuelle.Essayer »
calcDéfinit une hauteur de ligne à l'aide d'un calcul.Essayer »
initialApplique la valeur par défaut de la propriété.Essayer »
inheritHérite la propriété de son élément parent.

Remarque : l'utilisation de l'unité em est largement recommandée pour des hauteurs de ligne scalables.

Pratique

Pratique
Que fait la propriété 'line-height' en CSS ?
Que fait la propriété 'line-height' en CSS ?
Was this page helpful?