Pourquoi « display : inline-block » crée-t-il un espace au-dessus d'une division cachée ?

Pourquoi le bloc en ligne ajoute de la hauteur aux divisions cachées

Lors de l'utilisation de l'affichage : le bloc en ligne sur un

élément, on peut rencontrer un espace inattendu au-dessus de l'élément lorsque l'élément contenant est masqué. Ce comportement ne se produit pas avec display: block.

Pourquoi cela se produit-il ?

display: inline-block modifie les calculs de hauteur de ligne. Dans un contexte de formatage en ligne, la hauteur des éléments inline-block est basée sur leur propriété « line-height ». Pour les éléments de bloc en ligne vides, cela se traduit par leur hauteur de ligne de base, même s'ils n'ont aucun contenu visible.

Raisonnement derrière l'écart

Par conséquent, un élément de bloc en ligne vide inline-block réserve un espace de ligne minimum en fonction de sa hauteur de ligne héritée, généralement du élément. Cet espace réservé se manifeste par un espace au-dessus de l'élément lorsque son conteneur n'est pas visible.

Correction rapide

Pour éliminer cet espace, une solution rapide consiste à envelopper l'inline -block élément dans un wrapper qui définit explicitement font-size: 0. Cela garantit qu'il n'y a pas de police ni de hauteur de ligne, ce qui n'entraîne aucune hauteur pour le bloc en ligne vide.

Mise à jour

La hauteur d'un élément inline-block vide n'est pas explicitement définie dans la documentation officielle. Cependant, sur la base des tests, cela peut être compris comme suit :

• Espace vide : Les éléments de bloc en ligne réservent une zone de ligne pour un contenu potentiel.
• Hauteur de ligne héritée : Cette zone de ligne est basée sur la hauteur de ligne héritée de l'élément parent, y compris l'élément élément.
• Espace de ligne minimum : Bien que les blocs en ligne vides n'existent pas techniquement à des fins de formatage, ils réservent toujours un espace de ligne minimum.

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!

for using Property this display

Déclaration：

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