Comment la hauteur de ligne affecte-t-elle la hauteur des zones de contenu HTML ?

Comprendre la hauteur des zones de contenu dans les éléments HTML

En HTML, les éléments peuvent être classés en éléments de bloc ou en éléments en ligne. La hauteur de leurs zones de contenu, ou la zone qu'elles occupent sur l'écran, est déterminée par différentes règles.

Éléments de bloc

Éléments de bloc, tels que div et p, ont leur hauteur déterminée principalement par leur propriété de hauteur de ligne. Si la hauteur de ligne est définie sur une valeur telle que 2em, la hauteur de la zone de contenu sera deux fois supérieure à la hauteur de la ligne.

Ce comportement est cohérent pour tous les éléments de bloc, comme illustré dans le exemple suivant :

<div>

Éléments en ligne

Contrairement aux éléments de bloc, les éléments en ligne, tels que span, font n'a pas de propriété de hauteur. Au lieu de cela, leurs dimensions verticales sont dérivées de leurs propriétés de police. La spécification ne définit pas explicitement comment les UA doivent déterminer la hauteur des zones de contenu des éléments en ligne, mais ils utilisent généralement la boîte em de la police ou les mesures ascendantes/descendantes.

Cela signifie que même si vous pouvez définir la ligne- hauteur sur les éléments en ligne, cela n’affecte pas directement leur hauteur. La hauteur varie en fonction de la police et de la taille de la police utilisée, comme démontré ci-dessous :

<span>

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!