Propriété CSS line-height

La propriété line-height définit la hauteur des lignes. Il y a trois situations:

Sur les éléments du niveau bloc, la propriété line-height définit la hauteur minimale des lignes des boîtes de ligne dans l'lément.
Sur les éléments en ligne qui ne sont pas remplacés, la propriété line-height définit la hauteur, qui est utilisée pour la calculation de la hauteur de la boîte de ligne.
Sur les éléments en ligne qui sont remplacés tels que les boutons et d'autres éléments de saisie, la propriété line-height n'a aucun effet.

Les valeurs négatives sont valides.

Line-height par défaut est de 110% à 120% environ pour la plupart des navigateurs.

La propriété line-height est utilisée pour définir le début des lignes d'un texte. Si la valeur line-height est supérieure à la valeur de font-size d'un élément, la différence sera le début de texte.

La propriété line-height n'a aucun effet quand elle est appliquée aux élément en ligne: tels que boutons, images, etc.

Valeur initiale	normal
Appliquée à	Éléments de liste.
Héritée	Oui.
Animable	Oui. La hauteur des lignes est animable.
Version	CSS1
Syntaxe DOM	object.style.lineHeight = "40px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div{
      line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété line-height</h2>
    <h3>line-height: normal (default)</h3>
    <div>C'est un paragraphe avec une hauteur des lignes standarde.<br>
      La hauteur des lignes standarde dans la plupart des navigateurs est de  110% à 120% environ.
    </div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple ci-dessous, la hauteur des lignes est spécifiée par "px".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div{
      line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété line-height </h2>
    <h3>line-height: 10px</h3>
    <div>C'est un paragraphe avec une hauteur des lignes spécifiée. <br>
      La hauteur des lignes ici est définie à 10 pixels.
    </div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, la hauteur des lignes est spécifiée par pourcentages.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété line-height</h2>
    <h2>line-height: 200%</h2>
    <div>C'est un paragraphe avec la  plus grande hauteur des lignes.<br>
      La hauteur des lignes est ici définie à 200%.
    </div>
  </body>
</html>

Essayez-vous-même!

Un exemple qui comprend tous les valeurs de cette propriété.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété line-height</h2>
    <h3>line-height: 1</h3>
    <div class="a">C'est un paragraphe avec une hauteur des ligne spécifiée.<br>
      La hauteur des lignes est ici définie à 1.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">C'est un paragraphe avec une hauteur des ligne spécifiée.<br>
      La hauteur des lignes est ici définie à  50 pixels.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">C'est un paragraphe avec une hauteur des ligne spécifiée.<br>
      La hauteur des lignes est ici définie à 0.5 centimètre.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">C'est un paragraphe avec une hauteur des ligne spécifiée.<br>
      La hauteur des lignes est ici définie à 1 centimètre.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">C'est un paragraphe avec une plus grande hauteur des lignes.<br>
      La hauteur des lignes est ici définie à 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">C'est un paragraphe avec une hauteur des lignes standarde.<br>
      La hauteur des lignes standarde dans la plupart des navigateurs est de 110% à 120% environ.
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
normal	Définit une hauteur des lignes normale. C'est la valeur initiale de cette propriété.
length	Définit une hauteur des lignes fixée par px, cm etc.
number	Définit un nombre qui est multiplié par la taille de la police actuelle pour définir la hauteur des lignes.
%	Définit la hauteur des lignes en pourcents de la taille de la police actuelle.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.