Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-11-11 22:29:02
original
416 Les gens l'ont consulté

How Does Line-Height Affect the Height of Block and Inline Elements?

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal