Pourquoi mon image HTML5 a-t-elle une marge inférieure de 3 pixels malgré l'absence de CSS explicite ?

Anomalie d'image HTML 5 : problème de marge inférieure inexpliqué

Lors de l'utilisation de HTML 5, les utilisateurs peuvent rencontrer un problème déroutant où les images sont enveloppées dans des éléments DIV présentent une marge inférieure inexplicable de 3 pixels. Cette anomalie persiste malgré l'absence de définitions de marge explicites dans le CSS. Par exemple, considérons la structure HTML suivante :

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

Avec le DIV .placeholder possédant un style display: table, les dimensions de l'image restent à 50x50px. Cependant, le .placeholder DIV s'étend mystérieusement verticalement jusqu'à 53 pixels. Ce comportement inattendu a intrigué de nombreux développeurs en quête de résolution.

Solution : alignement vertical

La cause première de cette anomalie réside dans le traitement de l'image comme un caractère de texte, ce qui entraîne un espace inutile en dessous, semblable à celui occupé par les descendants de lettres comme « y » ou « g ». Pour remédier à cela, la propriété CSS vertical-align garantit qu'aucun espace de ce type n'est alloué. Pratiquement n'importe quelle valeur d'alignement vertical suffira, le milieu étant un choix populaire.

img {
    vertical-align: middle;
}

La mise en œuvre de cette solution élimine efficacement la marge inférieure de 3 px et résout le problème d'affichage de l'image. Comme illustré dans le jsFiddle mis à jour, l'image et son DIV environnant affichent désormais leurs dimensions prévues sans l'espace vide particulier sous l'image.

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!