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

Comprendre la détermination de la hauteur dans les éléments de bloc et en ligne

Pour déterminer la hauteur d'un bloc ou d'un élément en ligne, la hauteur de ligne la propriété joue un rôle crucial pour les éléments de bloc spécifiquement dans certains contextes.

Bloquer Éléments

Pour les éléments de bloc, la hauteur de la zone de contenu dépend de deux scénarios principaux :

1. Contexte de formatage en ligne (IFC) : Lorsqu'un element établit un IFC, la hauteur est définie par la hauteur de ligne de l'élément, comme le montrent les exemples de paragraphe et de div. Ces éléments contiennent une seule zone de ligne dont la hauteur est déterminée par la hauteur de ligne.

2. Contexte de formatage de bloc (BFC) : Dans un BFC, la hauteur est déterminée par la séquence suivante :

   • Le bord inférieur de la dernière case de ligne de l'élément (si un IFC est établi).
   • Le bord inférieur de la marge du dernier élément enfant entrant (si sa marge inférieure ne s'effondre pas avec la marge inférieure de l'élément).
   • Le bord inférieur du dernier élément enfant entrant (si sa marge supérieure ne s'effondre pas réduire avec la marge inférieure de l'élément).
   • Zéro, si aucune des conditions ci-dessus apply.

Éléments en ligne

Contrairement aux éléments de bloc, les éléments en ligne n'ont pas de propriété de hauteur définie. La hauteur de la zone de contenu est déterminée par les propriétés de police utilisées et elle n'est pas directement liée à la hauteur de la ligne.

Le La spécification indique que "Un UA peut, par exemple, utiliser la em-box ou l'ascendant et le descendant maximum de la police" pour déterminer la hauteur, la laissant à la discrétion de l'agent utilisateur.

Remarque : La zone de contenu d'un élément en ligne est différente de sa zone de ligne. Le remplissage vertical, la bordure et la marge entourant la zone de contenu y sont ajoutés, mais seule la hauteur de la ligne est prise en compte lors du calcul de la hauteur de la zone de ligne.

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!