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

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

DDD

Libérer： 2024-11-02 07:37:30

original

653 Les gens l'ont consulté

Why Does `display: inline-block` Create a Gap Above a Hidden Div?

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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