Pourquoi les images dans les DIV HTML5 ont-elles une marge inférieure de 3 pixels et comment puis-je y remédier ?

Résolution d'un problème de marge inexpliqué avec les images en HTML5

En HTML5, les utilisateurs ont rencontré un problème inattendu où les images incluses dans des éléments DIV acquièrent une Marge inférieure de 3px malgré l'absence de définitions CSS qui en sont la cause. Ce problème a été observé même lorsque la hauteur et la largeur de l'image et le DIV sont tous deux définis sur 50 px.

Pour résoudre cette anomalie, le problème peut être attribué au fait que l'image se comporte comme un caractère dans le texte, créant un espace en dessous pour accrocher des caractères comme « y » ou « g ». La solution réside dans l’utilisation de la propriété CSS vertical-align pour indiquer qu’aucun espace de ce type n’est nécessaire. N'importe quelle valeur pour l'alignement vertical suffira, "milieu" étant un choix populaire.

Implémentation de ce correctif en CSS :

img {
    vertical-align: middle;
}

En incorporant ce code, les images perdront les éléments indésirables marge inférieure, ce qui entraîne le comportement attendu. Pour une démonstration pratique, reportez-vous à ce jsFiddle mis à jour : http://jsfiddle.net/fRpK6/1/.

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!