Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.

line-height :
CSS3 est « modulaire » : les navigateurs peuvent ainsi implémenter des sous-ensembles de CSS, en fonction de leurs besoins ou capacités.

Compatibilité avec les navigateurs.

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

Voir aussi...

Blocs de texte - Propriétés.