Line-height - Propriété CSS
Résumé des caractéristiques de la propriété line-height
normalnormalline-height passe d'une valeur à l'autre sans transition.Schéma syntaxique de line-height.
Précisions concernant le schéma ci-dessus :
lengthest une valeur numérique, positive ou nulle, suivie d'une des unités de dimension.%est un pourcentage calculé par rapport à la taille des caractères.numberest un nombre sans unité, positif ou nul.
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, 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.
de ligne de 1.5
de la hauteur de ligne
de ligne de 150%
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 :
- Une valeur suivie d'une des unités de dimension. Les unités relatives aux caractères, comme
emsont particulièrement indiquées. - Une valeur sans unité. Elle est alors traitée comme un coefficient :
1.5signifiant une hauteur de ligne une fois et demi plus grande que la taille des caractères. - 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.
- Une valeur suivie d'une des unités de dimension. Les unités relatives aux caractères, comme
Valeurs communes à toutes les propriétés :
line-height: initial (normal)
line-height: inherit
line-height: revert
line-height: revertLayer
line-height: unset
Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.
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.
Exemple interactif avec la propriété line-height.
Compatibilité avec les navigateurs.
Tous les navigateurs actuels traitent correctement la propriété line-height.
line-height utilisée pour définir la hauteur de l'interligne.line-heightNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
Safari
Safari sur IOS
UC Browser pour Androïd
Opéra mini
Évolution de la propriété line-height.
La propriété line-height n'a pratiquement pas changé au fil des versions du langage CSS.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Version 1 du langage CSS. Première définition de la propriétéline-height.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Acceptation de la valeurinhereit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Mise en page en ligne - Niveau 3
Pas de changement concernant la propriétéline-height.18 Décembre 2014Document de travail.
Voir aussi, concernant les dispositions en ligne.
Le module de spécification dénommé "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, définit ce qui est relatif à la disposition en ligne
des éléments, que ce soit dans un objet SVG ou dans un document HTML.
La propriété line-height est décrite dans ce module, ainsi que les propriétés suivantes :
Propriétés :
text-box-edge (langages CJK).