Line-Height et éléments en ligne : une plongée plus approfondie

Comprendre le comportement de la hauteur de ligne dans les éléments en ligne peut être déroutant. Malgré des recherches approfondies, certains aspects clés restent flous. Ce guide approfondit le sujet pour répondre aux questions suivantes :

1. Incohérence entre la taille de la police et la hauteur mesurée :

Un élément en ligne avec une taille de police de 15 px affiche une hauteur de 18 px dans les outils de développement du navigateur. Cela se produit parce que :

• Hauteur de la boîte en ligne : La propriété line-height détermine la hauteur de la boîte en ligne, qui entoure tous les glyphes et leur demi-interligne de chaque côté. Dans ce cas, la hauteur de la zone est de 15 px.
• Hauteur de la zone de contenu : Les outils de développement signalent la hauteur de la zone de contenu, qui dépasse généralement la hauteur de la ligne en raison des variations dans la taille des glyphes. dans une police.

2. La couleur d'arrière-plan ne correspond pas à la hauteur de la ligne :

La couleur d'arrière-plan de l'élément en ligne ne s'aligne pas sur la hauteur de la ligne car :

• Hauteur de la zone de ligne : En plus des zones en ligne, il existe également des zones de ligne. La hauteur d'une zone de ligne est déterminée par la hauteur de ligne et inclut uniquement les zones en ligne partageant la même hauteur de ligne et le même alignement vertical. Dans cet exemple, la hauteur de la zone de ligne est également de 15 px.
• Hauteur de la zone de contenu : La couleur d'arrière-plan est appliquée à la zone de contenu, qui correspond à la hauteur du glyphe le plus haut de la zone utilisée. police et taille. Cette valeur peut varier en fonction des caractéristiques de la police et n'est pas directement liée à la hauteur de la ligne.

Remarque : La spécification CSS ne définit pas explicitement l'algorithme de calcul de la zone de contenu. hauteur, le laissant à l'interprétation des agents utilisateurs.