Pourquoi les images HTML5 dans les DIV ont-elles parfois une mystérieuse marge inférieure de 3 pixels ?

Comprendre la mystérieuse marge de 3 px dans les images HTML5

Plusieurs utilisateurs ont rencontré un phénomène inattendu où les images contenues dans des éléments DIV présentent une particulière marge inférieure de 3 px. malgré l'absence de marges CSS explicites. Pour approfondir cette anomalie, explorons l'extrait de code fourni :

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Lors de l'attribution d'un style display: table à .placeholder, la hauteur ajoutée (53 px au lieu de 50 px) suggère que l'image se comporte comme un caractère dans une chaîne de texte, en laissant un espace en dessous pour une lettre suspendue comme "y" ou "g".

Pour résoudre ce problème, la propriété CSS vertical-align peut être utilisé pour indiquer qu’aucun espace de ce type n’est nécessaire. Comme démontré dans le bloc de code fourni, la définition de vertical-align: middle aligne l'image verticalement sans laisser d'espace supplémentaire.

Voici le code révisé avec la solution implémentée :

img {
    vertical-align: middle;
}

En appliquant Avec cet ajustement, les images s'aligneront correctement dans l'élément DIV, éliminant ainsi la marge déroutante de 3 pixels. Les utilisateurs peuvent se référer au lien jsFiddle ci-joint pour un exemple fonctionnel :

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!