Pourquoi y a-t-il un espace blanc inattendu sous ma balise d'image en ligne ?

Un espace blanc mystérieux sous la balise d'image résolu

Vous avez récemment modifié l'image d'en-tête de votre site Web, passant d'une image d'arrière-plan CSS à une image en ligne élément d'image. Même si l'image s'agrandit désormais comme prévu, vous avez rencontré un écart inattendu de 10 px en dessous.

Après avoir utilisé l'inspecteur de Chrome, mais sans avoir réussi à identifier la cause, vous vous êtes tourné vers les forums en ligne pour obtenir de l'aide. Une solution suggérée est basée sur le concept de descendants typographiques.

Les descendants sont des lettres qui s'étendent en dessous de la ligne de base du texte, telles que "j", "g", "p" et "y". Par défaut, les éléments en ligne comme les images suivent l'alignement de la ligne de base, qui prend en compte l'espace requis pour les descendeurs.

Solutions :

• Définir verticalement - align: bottom to the img tag: Cela aligne l'image avec le bas du conteneur, éliminant le blanc space.
• Changer display: inline pour display: block: Cela convertit la balise img en un élément de niveau bloc, supprimant son alignement de base.
• Ajuster la propriété line-height du conteneur : Définir la hauteur de ligne sur 0 peut éliminer l'écart.
• Définir a font-size : 0 sur le conteneur : Cela élimine également l'alignement de la ligne de base mais peut nécessiter la restauration de la taille de la police sur les éléments enfants.

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!