Espaces indésirables sous les images

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (13801 lectures)

Il existe parfois des comportements navigateurs difficiles à comprendre et à expliquer. Celui de l'espace qui se crée en-dessous des images sur Internet Explorer en fait partie.

A la suite de la rédaction de ce tutoriel qui explique comment réaliser des cadres arrondis autour des textes, plusieurs personnes m'ont fait part de problèmes curieux : la partie haute ou basse de leur cadre se déboublait ou présentait un espace non volontaire.

Voici un exemple de partie incriminée :

<div class="toto"><img src="images.png" width="100px" height="10px" alt="" /></div>

Après quelques tests, il s'avère qu'il s'agit un problème avec Internet Explorer sur les balises en-ligne dont le "height" est inférieur à celui du texte courant

J'ai donc proposé une solution tout en bas du tutoriel :

Sur IE toutes les images (et autres balises en-ligne) occupent par défaut une hauteur minimale (celle du texte par défaut), soit environ 13px. Donc toutes les images de moins de 13px prendront quand-même 13px, cela va générer un espace en-dessous de l'image.
On peut feinter IE en mettant font-size à 0 ou line-height à 0 dans le bloc contenant l'image (ici le div de classe "toto").

Cette solution fonctionnait très bien, mais ne fournissait aucune explication sur le phénomène en question.

Finalement après de nombreuses recherches infructueuses, je trouvais enfin des explications claires sur LaNouvelleFAQ.

La Nouvelle FAQ le dit bien mieux que moi :

En HTML, les images sont considérées comme du texte, c'est à dire qu'une image se placera par défaut sur la ligne de base du texte, comme n'importe quelle lettre.

Le problème est qu'il y a toujours un espace sous la ligne de base du texte pour laisser de la place aux lettres comme : p q g ou y

Dans un tableau ou un bloc, cet espace peut s'avérer gênant si l'image ne fait pas partie d'un texte mais occupe la totalité d'une cellule ou du bloc.

L'astuce consiste alors à ne plus considérer l'image comme un élément en-ligne qui se comporte comme du texte mais comme un Bloc à part entière. On utilise pour cela la propriété "display" :

img {
  display: block;
}

D'ailleurs en passant, je vous conseille vivement de parcourir le wiki de la NouvelleFAQ, souvent très clair et bien construit... vous passerez le bonjour à GM de ma part !