Pourquoi mon image comporte-t-elle un espace blanc inattendu en dessous après avoir basculé d'une image d'arrière-plan ?

Espace blanc mystérieux sous la balise d'image : Dépannage de la descente de ligne cachée

L'espace blanc mystérieux apparaissant sous une image après le passage d'une image d'arrière-plan à un La balise peut être attribuée à une technicité subtile en HTML et CSS.

L'image d'arrière-plan d'origine n'est pas un élément de texte, elle ne respecte donc pas les règles d'alignement vertical. En revanche, les éléments en ligne comme les images s'alignent sur la ligne de base, une ligne de référence qui s'adapte à la descente de lettres comme « g » et « y ».

Cette descente crée un espace subtil sous l'image, qui n'est pas provoqué par marge ou remplissage, mais est simplement un artefact de l'alignement de la ligne de base.

Résoudre l'espace blanc :

Pour éliminer le blanc espace, envisagez les solutions suivantes :

• Vertical-align: bottom : Ajustez l'alignement vertical de l'image vers le bas de son conteneur, en vous assurant qu'elle ne dépasse pas l'espace bord du conteneur.
• Affichage : bloquer : Basculez le mode d'affichage de l'image sur bloquer, ce qui supprime son comportement en ligne et lui permet de remplissez l'espace disponible.
• Hauteur de ligne : 0 : Définissez la hauteur de ligne du conteneur sur zéro, éliminant ainsi tout espace vertical alloué à la descente de ligne.
• Font-size : 0 : Définissez la taille de police du conteneur sur zéro, ce qui supprime la descente de ligne sans affecter la taille de police de l'élément enfant (si nécessaire).

En s'attaquant à la cause sous-jacente de l'espace blanc, l'une de ces méthodes réussira à résoudre le problème et à aligner correctement l'image dans son conteneur.

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!