CSS - Propriété line-height

Description de la propriété line-height.

line-height définit la hauteur des lignes de texte.

La hauteur des lignes n'est pas égale à la taille des caractères : elle inclut en plus un espace au dessus et en dessous des lettres. Ceci afin que les lettres ne se touchent pas d'une ligne sur l'autre.

Ces espaces, sortes de marges verticales, sont très variables d'une police de caractères à une autre.

Dans le cas où plusieurs tailles de caractères sont présentes sur la même ligne, la hauteur par défaut sera calculée par rapport à la taille des caractères les plus grands. Les exposants et les indices peuvent également provoquer une augmentation de la hauteur des lignes si cette dernière n'est pas fixée.

La hauteur de ligne est prise en compte par la propriété vertical-align pour le positionnement vertical d'éléments sur une même ligne.

Syntaxes pour line-height.

• line-height: normal;

  Valeur par défaut. La hauteur des lignes de texte est adaptée à la taille des caractères.

• line-height: 2;

  La hauteur des lignes de texte est déterminée par cette valeur.

  Il s'agit d'une valeur positive ou nulle, dans un des formats suivants :

  1. Une valeur suivie d'une unité de dimension (voir les unités de dimensions en CSS). Les unités relatives aux caractères, comme em sont particulièrement indiquées.
  2. Une valeur sans unité. Elle est alors traitée comme un coefficient : 1.5 signifiant une hauteur de ligne une fois et demi plus grande que la taille des caractères.
  3. Un pourcentage. Il sera calculé par rapport à la taille des caractères. Une valeur de l'ordre de 150% est généralement correcte.
• line-height: initial;

  La valeur initiale est normal.

• line-height: unset; line-height: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Compatibilité avec les navigateurs.

Tous les navigateurs actuels traitent correctement la propriété line-height.

Voir aussi...

Blocs de texte - Propriétés.

• direction : Sens d'écriture.
• hyphens : Césure des mots.
• letter-spacing : Espacement des lettres.
• text-align : Alignement du texte.
• text-align-last : Alignement de la dernière ligne des paragraphes.
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.
• text-emphasis-position : Position des caractères de mise en exergue.
• text-emphasis-style : Style de mise en exergue.
• text-indent : Définit le retrait de la première ligne des paragraphe (indentation).
• text-justify : Méthode utilisée pour justifier le texte.
• text-overflow : Indication de débordement du texte.
• unicode-bidi : Gestion des possibilités d'écriture bidirectionnelle de Unicode.
• word-spacing : Espacement des mots.
• writing-mode : Sens et direction d'écriture (horizontale ou verticale).