Fixation du problème de marge inexpliqué avec des images dans HTML5

Dans HTML5, les utilisateurs ont rencontré un problème non inattendu où les images fermées dans les éléments divisés gagnent une marge de fond 3Px non. Ce problème a été observé même lorsque la hauteur et la largeur de l'image et la div sont toutes deux définies sur 50px.

pour résoudre cette anomalie, le problème peut être attribué à l'image se comportant comme un personnage dans le texte, créant un espace en dessous pour des caractères suspendus comme "Y" ou "G". La solution réside dans l'utilisation de la propriété CSS à alignement vertical pour indiquer qu'aucun espace de ce type n'est nécessaire. Toute valeur pour le rendement vertical suffira, avec "Middle" étant un choix populaire.

implémentant ce correctif en css:

img {
    vertical-align: middle;
}

En incorporant ce code, les images perdront la marge inférieure indésirable, entraînant le comportement attendu. Pour une démonstration pratique, reportez-vous à ce jsfiddle mis à jour: http://jsfiddle.net/frpk6/1/.