Quel est l'impact de la hauteur de ligne sur la hauteur des éléments de bloc et en ligne ?

<p>

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

Éléments de bloc

<p>Pour les éléments de bloc, la hauteur de la zone de contenu peut être déterminé à l'aide de la propriété line-height de la manière suivante :

• En l'absence d'enfants au niveau du bloc, remplissage, ou bordures, la hauteur de l'élément est déterminée par la hauteur de la ligne.
• Si l'élément de bloc établit un contexte de formatage en ligne (IFC), la hauteur est définie par la dernière case de ligne définie par la ligne -height.
• Si l'élément block établit un contexte de formatage de bloc (BFC), la hauteur est déterminée par la hauteur du dernier enfant du flux entrant (y compris les marges réduites) ou par le bord inférieur de la bordure. cet enfant (si sa marge supérieure ne s'effondre pas avec la marge inférieure de l'élément).

Éléments en ligne

<p>Pour les éléments en ligne, la propriété height ne s'applique pas. Au lieu de cela, la hauteur de la zone de contenu est basée sur les métriques de police utilisées et ne peut pas être explicitement contrôlée par les propriétés CSS. La zone de contenu doit toujours tenir dans la zone de ligne, mais la hauteur exacte peut varier en fonction de la police et du moteur de rendu.

<p>Pour illustrer la différence, considérez l'extrait de code suivant :

<p>Dans cet exemple, les éléments div et p établissent un IFC, donc la hauteur de la zone de ligne correspondra à la hauteur de la ligne. Cependant, pour l'élément span en ligne, la hauteur de la zone de contenu est déterminée par les métriques de police et peut différer de 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!