Pourquoi mon image comporte-t-elle un espace blanc supplémentaire en dessous ?

Dépannage du mystérieux espace blanc sous une balise d'image

Lors du redimensionnement d'une image à l'aide d'une balise tag, vous pouvez rencontrer un espace déroutant sous l’image. Malgré une inspection approfondie du code, la source de cet espace reste insaisissable.

Comprendre l'alignement de base

La réponse réside dans le concept d'alignement de base en HTML. Les éléments en ligne, y compris Les balises sont alignées sur la ligne de base, qui accueille les caractères qui s'étendent en dessous de la ligne de base, appelés descendeurs. Cela garantit que les éléments de texte conservent une position verticale cohérente.

Résolution de l'espace blanc

Pour résoudre l'espace blanc provoqué par l'alignement de la ligne de base, envisagez les solutions suivantes :

• Appliquer l'alignement vertical : Ajouter l'alignement vertical : bas à l'élément pour l'aligner au bas du conteneur, éliminant ainsi l'espace.
• Modifier la propriété d'affichage : Convertissez la balise balise du niveau en ligne au niveau bloc (affichage : bloc) pour supprimer l'alignement de la ligne de base.
• Ajuster la hauteur de la ligne du conteneur : Augmentez la hauteur de la ligne sur le conteneur pour pousser le contenu vers le bas, créant ainsi suffisamment d'espace pour accueillir les descendants.
• Définissez la taille de police du conteneur sur 0 : Attribuez la taille de police : 0 au conteneur pour éliminez tout espace créé par les descendeurs. Vous pouvez éventuellement réinitialiser la taille de la police sur l'élément enfant.

Notes supplémentaires

• Ce problème ne provient pas de la marge ou du remplissage, ce qui le rend difficile pour identifier à l'aide des outils de développement.
• L'écart résulte de l'élévation du contenu en raison de l'alignement de la ligne de base.
• Autre en ligne des éléments (par exemple, texte, span) peuvent également présenter ce comportement.

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!