Le défi de l'alignement des icônes avec le texte dans les listes est qu'une fois que le texte dépasse une ligne, l'icône centrée visuellement peut paraître décalée. L'approche initiale consistant à utiliser align-items: start dans Flexbox déplace l'icône au sommet du conteneur, ce qui n'est pas idéal en raison de l'espace de ligne par défaut.
Pour résoudre ce problème lorsque l'icône est un élément HTML, il est recommandé d'ajuster la position verticale de l'icône. L'utilisation d'une valeur fixe avec transform: translateY() s'avère instable lorsque la taille de la police, la taille de l'icône ou la largeur du conteneur changent. La solution la plus robuste consiste à utiliser l'unité lh (line-height) pour calculer un décalage dynamique, assurant ainsi un alignement constant quelle que soit la taille du texte ou de l'icône.
Lorsque l'icône est ajoutée via un pseudo-élément comme image de fond, le même principe de calcul d'un décalage relatif s'applique pour garantir un alignement cohérent avec la première ligne de texte, même lorsque le texte se prolonge sur plusieurs lignes.
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.
Pour résumer, ne pas mettre d'unité dans le code CSS suivant : line-height - cela évite bien des soucis si l'utilisateur redimensionne sa police de caractères (via https://www.hteumeuleu.fr/demain-la-veille-1/ )
Tout est dans le titre... pas simple !
Tout est dans le titre