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 :

line-height - Propriété CSS

line-height

Résumé des caractéristiques de la propriété line-height

Description rapide
Définit la hauteur des lignes de texte.
Statut
Standard
Type de valeur
[number+] | Pourcentage+
Valeurs prédéfinies
normal
Pourcentages
Calculés par rapport à la taille des caractères.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété line-height passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page en ligne
Références (W3C)
Statut du document:: WD (document de travail)

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.

Comparaison entre line-height et font-size

Ces espaces, sortes de marges verticales, ont une valeur par défaut 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.

Particularité de line-height au sujet de l'héritage.

La valeur de line-height peut être exprimée soit par un coefficient, soit par une pourcentage (voir le détail des syntaxes ci-dessous). On pourrait penser que 1.5 est équivalent à 150%. Ce sera vrai pour l'élément lui-même, mais pas pour les éléments qui héritent de la valeur de line-height.
En effet, le coefficient est hérité en tant que tel, il est donc recalculé pour chaque élément en fonction de la taille de la police. Le pourcentage par contre est hérité en tant que valeur calculée : le calcul n'est pas refait pour chacun des éléments qui héritent.
Les hauteurs de ligne exprimées dans une unité relative à la taille des caractères (em, ex, etc) s'héritent comme les pourcentages : le calcul est fait sur l'élément parent mais n'est pas refait pour chacun des éléments.

Ce texte a une hauteur
de ligne de 1.5
Ce texte hérite
de la hauteur de ligne
Ce texte a une hauteur
de ligne de 150%
Ce texte hérite
de la hauteur de 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 CSS de dimension). 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.

    Attention ! Ces différentes syntaxes pour exprimer la valeur auront un mécanisme d'héritage différent pour chacune d'elles. Voir notre remarque au sujet de l'héritage ci-dessus.

    Une hauteur de ligne entre 1.2 et 1.5 (120% à 150%) est généralement une valeur correcte.

  • line-height: initial; line-height: inherit; line-height: revert; line-height: revert-layer; line-height: unset;

    La valeur initiale est : normal.

Animation de la propriété line-height.

La hauteur de ligne (line-height) s'anime sans problème, et avec un résultat assez fluide.

La hauteur de ligne d’un texte contribue beaucoup à sa lisibilité, notamment parce qu’elle influe sur la couleur typographique, c’est-à-dire l’aspect plus ou moins foncé du bloc de texte.

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.

1
line-height
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que line-height.

Les spécifications CSS éditées par le W3C sont organisées en modules. line-height fait partie du Module CSS - Mise en page en ligne (CSS Inline Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit comment un élément est aligné, dans le sens vertical, par rapport à son parent.
Définit la ligne de base utilisée pour les alignements verticaux de textes.
Spécifie une réduction de la hauteur d'une boîte de texte.
Alignement vertical.