line-height - Propriété CSS
Résumé des caractéristiques de la propriété line-height
normal
normal
line-height
passe d'une valeur à l'autre sans transition.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 unité de dimension (voir les unités CSS de dimension).
Les unités relatives aux caractères, comme
em
sont particulièrement indiquées. - 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. - 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 unité de dimension (voir les unités CSS de dimension).
Les unités relatives aux caractères, comme
- 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.
Simulateur.
Compatibilité avec les navigateurs.
Tous les navigateurs actuels traitent correctement la propriété line-height
.
line-height
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.