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

Anomalie de marge d'image HTML 5 : solution révélée

Dans HTML 5, un problème particulier survient lorsque les images incluses dans un élément DIV affichent une image inexpliquée. Marge inférieure de 3 pixels, malgré l'absence de style CSS qui l'exige. Cette anomalie a laissé les développeurs perplexes, perturbant la mise en page prévue de leurs pages Web.

La cause sous-jacente de ce comportement provient du rendu de l'image sous forme de caractère de texte. En tant que tel, il agit comme du texte, laissant un espace en dessous pour accueillir des caractères suspendus comme « y » ou « g ». Pour remédier à cela, nous devons utiliser la propriété CSS vertical-align pour indiquer explicitement qu'aucun espace de ce type n'est nécessaire.

Une large gamme de valeurs d'alignement vertical peut résoudre efficacement ce problème ; cependant, pour des raisons esthétiques, « milieu » est un choix populaire. En incorporant ceci :

img {
    vertical-align: middle;
}

dans votre CSS, vous pouvez éliminer la marge inférieure indésirable de 3 px des images dans les éléments DIV. Cette solution élimine l'anomalie et rétablit la mise en page prévue de votre page Web.

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!