line-height |
Hauteur de ligne |
CSS |
|
Syntaxe
Paramètres
Paramètre |
Description |
paramètres |
Ce paramètre de propriété permet d'indiquer la distance : |
normal |
Cet attribut permet d'indiquer que l'espacement est de taille normal. Valeur par défaut. |
distancept |
Cet attribut permet d'indiquer que l'espacement est calculé en points. |
pourcentage% |
Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la police de caractères. |
distance |
Cet attribut permet d'indiquer que l'espacement est calculé en nombre réel (à virgule flottante). |
Description
Cette propriété permet de spécifier l'espacement entre chacun des lignes du paragraphe. On appel aussi ce terme l'«Interligne».
Remarques
- Définition et rôle principal : La propriété line-height contrôle l'espacement vertical entre les lignes de texte. Elle joue un rôle crucial dans
l'amélioration de la lisibilité en ajustant la densité visuelle des paragraphes. En augmentant la valeur de line-height, les lignes de texte apparaissent plus
espacées, facilitant la lecture, surtout sur les écrans.
- Unités acceptées : line-height peut être défini avec différentes unités : un nombre sans unité (facteur multiplicateur), une valeur absolue (px, em, rem),
ou une valeur relative (pourcentages). Lorsqu'elle est utilisée sans unité, elle multiplie la taille de la police de caractères actuelle pour définir la hauteur des lignes.
- Valeur sans unité : Utiliser une valeur sans unité (par exemple, 1.5) est recommandé, car elle garantit un comportement proportionnel et indépendant de la taille
de la police de caractères des éléments imbriqués. Cela assure une meilleure cohérence dans des mises en page adaptatives (responsive design).
- Héritage et calcul automatique : La propriété line-height est héritée automatiquement par les enfants d'un élément. Toutefois, si la valeur est définie
avec une unité (comme px), l'espacement des lignes des éléments enfants ne s'adapte pas automatiquement à la taille de leur propre police de caractères, ce qui peut casser
la cohérence visuelle.
- Impact sur les blocs de contenu : line-height affecte non seulement l'espacement entre les lignes mais aussi l'espacement vertical entre plusieurs blocs
de texte dans certains cas, notamment lorsque l'élément n'a pas de marges ou de padding explicites.
- Utilisation courante pour la typographie web : Une valeur de line-height comprise entre 1.4 et 1.6 est souvent recommandée pour les paragraphes, car elle
améliore la lisibilité sur les écrans modernes. Les valeurs inférieures rendent le texte trop dense, tandis que les valeurs supérieures créent un effet de dispersion.
- Problèmes de compatibilité : Certains anciens navigateurs Web gèrent mal la combinaison de line-height et d'autres propriétés, comme
vertical-align. Il est donc important de tester les effets dans plusieurs environnements pour éviter des comportements inattendus.
- Influence sur l'accessibilité : Une line-height bien définie est essentielle pour garantir une accessibilité optimale, notamment pour les lecteurs avec
des troubles visuels ou cognitifs. Un espace vertical trop réduit peut fatiguer les yeux et compliquer la lecture des textes longs.
Dernière mise à jour : Dimanche, le 20 décembre 2015