Pourquoi un div de bloc en ligne vide gagne-t-il en hauteur dans un conteneur caché ?

Lors de l'utilisation de inline-block, un élément div en ligne vide dans un conteneur caché gagne curieusement en hauteur. Pourquoi cela se produit-il, contrairement au comportement de display:block ?

Display:inline-block confère un formatage spécifique à l'élément :

• Formatage de niveau en ligne : les éléments sont posés horizontalement dans le bloc conteneur.
• Calculs de la hauteur de ligne : la hauteur de ligne est calculée différemment pour les éléments en ligne. Pour les éléments de bloc en ligne, cela devient la hauteur de la zone de marge. Pour les éléments en ligne normaux, il s'agit de la propriété 'line-height'.

Lorsque l'élément inline-block est vide, il prend sa hauteur de ligne de base, même s'il n'y a pas de police ou de contenu de texte. Cela fait que l'élément gagne une hauteur petite mais perceptible, malgré son état vide.

Une solution de contournement pour éviter ce problème de hauteur consiste à utiliser un wrapper avec font-size:0 pour éliminer le calcul de la hauteur de ligne :

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

Mise à jour : Comprendre la hauteur du bloc en ligne

Contrairement aux hypothèses initiales, la hauteur exacte de un élément inline-block vide n'est pas officiellement documenté. Cependant, les observations et les tests suggèrent que :

• Inline-block réserve un espace de ligne minimum basé sur la hauteur de ligne héritée, généralement déterminée par le element.
• Cet espace de ligne persiste même si le bloc en ligne est vide et devrait théoriquement être traité comme une hauteur nulle selon les spécifications CSS.

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!