Pourquoi les divisions en bloc en ligne vides ont-elles une hauteur ?

Pourquoi Inline-Block définit une hauteur pour les divisions vides

Lorsqu'un élément div vide se voit attribuer la propriété d'affichage "inline-block", il présente de manière inattendue un gain de hauteur, un phénomène qui ne se produit pas avec « display:block ». Ce comportement apparemment paradoxal découle des caractéristiques inhérentes au formatage en bloc en ligne.

Calcul de la hauteur de ligne dans Inline-Block

Lors de la définition d'un élément en bloc en ligne, les calculs de hauteur de ligne subissent une transformation. Au lieu d'aligner les bases du texte à l'intérieur, le bloc en ligne aligne le bas, le haut ou les deux.

Hauteur de la ligne pour un bloc en ligne vide

Pour les éléments de bloc en ligne vides , le calcul de la hauteur de ligne est dérivé des métriques de police associées à l'élément. Cependant, comme il n'y a pas de contenu textuel, l'élément prend une hauteur de ligne de base basée sur la taille de police dont il hérite de son élément parent (généralement le corps).

Correction de l'inline vide- Hauteur du bloc

Pour éliminer la hauteur indésirable causée par la hauteur de ligne héritée, on peut utiliser un élément wrapper qui définit explicitement la taille de la police sur 0, annulant ainsi tout calcul de hauteur de ligne :

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
}

Mise à jour : hauteur d'un bloc en ligne vide

Il est important de noter que la hauteur d'un élément de bloc en ligne vide n'a pas de documentation officielle. Cependant, les observations révèlent une tendance.

Réservation d'espace de ligne minimum

Les éléments de bloc en ligne semblent réserver un espace de ligne minimum quel que soit leur contenu. Cet espace est basé sur la hauteur de ligne héritée de l'élément parent.

Implications

Ce comportement suggère que le bloc en ligne attend intrinsèquement du contenu et réserve un espace de ligne par défaut pour cela, même s'il est vide. Bien que cela contredise les spécifications W3 pour les zones de ligne vides de hauteur nulle, il s'agit d'une bizarrerie spécifique au formatage par bloc en 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!