L’article explore l’unité CSS lh, basée sur la hauteur de ligne (line-height), et ses cas d’usage pratiques. Contrairement aux unités fixes comme rem, lh permet un espacement vertical dynamique, proportionnel à la hauteur de ligne du texte, offrant une meilleure cohérence visuelle. Par exemple, appliquer margin-bottom: 1lh aux paragraphes ajuste automatiquement l’espacement en fonction de la taille de la police.
L’auteur illustre aussi l’utilité de lh pour créer des effets comme des lignes de papier (effet paper line), où la hauteur du dégradé CSS est définie en 1lh. Cette méthode évite les ruptures d’alignement lorsque la taille de la police change, contrairement à une valeur fixe en rem ou px. Le code montre comment hériter la taille de police et la hauteur de ligne depuis un parent pour une maintenance simplifiée.
Enfin, l’unité lh facilite l’alignement d’éléments flottants ou d’icônes dans les boutons, en s’adaptant aux variations de hauteur de ligne. Bien que moins connue, cette unité résout des problèmes de mise en page souvent contournés par des solutions complexes ou peu maintenables.
