Pourquoi mes images HTML5 ont-elles une mystérieuse marge inférieure de 3 pixels ?

Énigme HTML5 : images présentant une marge inattendue

Considérez un problème particulier rencontré lors de la conversion d'un site Web en HTML5. De manière inattendue, chaque image incluse dans un élément DIV présentait une marge inférieure inexplicable de 3 pixels, malgré l'absence d'une telle marge dans le CSS. Malgré un examen approfondi, la cause de cette anomalie est restée insaisissable.

La manifestation de ce problème est devenue apparente lorsque l'image s'est vu attribuer des dimensions de 50x50 pixels, tandis que l'élément DIV contenant (

) a été configuré avec l'affichage. : tableau. Il est intéressant de noter que la dimension de hauteur de .placeholder a augmenté de manière suspecte jusqu'à 53 pixels.

Résoudre l'énigme

La résolution de ce comportement déroutant réside dans la compréhension des caractéristiques inhérentes des images contenues dans HTML. Par défaut, les images se comportent comme des caractères de texte, ce qui entraîne un espace réservé en dessous pour l'hypothétique « queue » d'une lettre comme « y » ou « g ». Pour remédier à ce problème, la propriété CSS vertical-align peut être utilisée pour indiquer l'absence de cet espacement vertical supplémentaire.

Implémentation

Pour éliminer la marge inférieure indésirable, incorporez simplement la règle CSS suivante :

img {
    vertical-align: middle;
}

En spécifiant une valeur pour vertical-align, l'alignement vertical de l'image au sein de son élément parent est ajusté, neutralisant efficacement l'espace réservé.

Vérification visuelle

Cette solution est élégamment démontrée dans le jsFiddle mis à jour : [lien fourni].

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!