Comment la hauteur de ligne affecte-t-elle la hauteur des éléments en ligne ?

Explication de la hauteur de ligne dans les éléments en ligne

Les éléments en ligne ont des mesures de hauteur différentes en fonction du contexte. Voici une répartition détaillée :

Hauteur d'une boîte en ligne

Une boîte en ligne est la zone rectangulaire qui contient le contenu et l'interligne des glyphes. La hauteur de ligne détermine la hauteur de cette boîte, qui est la même que la valeur de hauteur de ligne dans la plupart des cas.

Hauteur d'une boîte de ligne

Une boîte de ligne englobe une rangée de boîtes en ligne. Si toutes les zones en ligne ont la même hauteur de ligne et le même alignement vertical, la hauteur de la zone de ligne est également déterminée par la hauteur de ligne.

Hauteur de la zone de contenu d'une boîte en ligne

La zone de contenu d'une boîte en ligne est la zone où le texte et d'autres éléments sont affichés. Cette zone peut différer de la hauteur de la zone en ligne en fonction de l'implémentation de l'agent utilisateur (navigateur).

La plupart des navigateurs basent la hauteur de la zone de contenu sur le glyphe le plus haut de la combinaison famille de polices et taille de police. Cela peut conduire à ce que la zone de contenu soit plus grande que la hauteur de la zone de ligne.

Taille de la police et hauteur de la zone de contenu

While font-size (15px dans votre exemple) détermine la hauteur de la boîte em, il ne garantit pas une hauteur de zone de contenu de 15 px. En effet, les navigateurs effectuent des ajustements en fonction des caractéristiques de la police.

Par exemple, dans votre cas, le navigateur a calculé la hauteur de la zone de contenu à 18 px pour la police "Verdana" et à 17 px pour la police "sans-serif". , même si vous définissez la taille de la police sur 15 px. Ces valeurs se situent dans la plage « raisonnable » de 1,0 à 1,2 fois la taille de la police.

Couleur d'arrière-plan et hauteur de ligne

La hauteur de la couleur d'arrière-plan dans Les éléments en ligne ne s'alignent pas sur la hauteur de ligne car ils s'étendent uniquement jusqu'à la hauteur de la zone de contenu. Cela explique pourquoi l'arrière-plan vert de votre exemple ne mesure que 18 px de haut, alors que la hauteur de la ligne est de 15 px.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!