Comment la hauteur des zones de contenu est-elle déterminée pour les éléments en bloc et en ligne ?

Détermination de la hauteur de la zone de contenu dans les éléments de bloc et en ligne

Comprendre la hauteur des éléments de bloc

Dans les éléments de niveau bloc, la hauteur du content-box est défini par la distance entre le haut du contenu et l'un des éléments suivants (en fonction de la présence d'un contexte de formatage en ligne (IFC) ou d'un contexte de formatage en bloc (BFC)) :

1. Le bas de la dernière case de ligne dans un IFC
2. La marge inférieure du dernier enfant entrant dans un BFC

Si l'élément a une hauteur définie explicitement, la hauteur de la zone de contenu est simplement cette valeur.

Élément en ligne Hauteur

Pour les éléments en ligne, la hauteur de la zone de contenu n'est pas explicitement définie et dépend de la taille de la police et d'autres propriétés de la police. La marge verticale, la bordure et le remplissage d'un élément en ligne commencent en haut et en bas de la zone de contenu, mais n'affectent pas la hauteur de la zone de ligne.

Exemple : Détermination de la hauteur

Dans l'extrait HTML fourni, la hauteur des zones de contenu est la suivante :

• Paragraphe (

  ): La hauteur est égale à la hauteur de ligne (2em) car elle établit un IFC avec une seule ligne.

• Div (
  ): Également égal à la hauteur de ligne (2em) pour la même raison.
• Span () : La hauteur varie en fonction de la hauteur de la ligne, indiquant que la hauteur est définie par les propriétés de la police et non par la hauteur de la 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!