Les balises « img » HTML peuvent présenter quelques surprises lors de l’intégration, particulièrement un petit espace blanc situé juste en dessous.

Afficher une image dans une page HTML, cela vous parait d’une simplicité absolue ?
En fait cela dépend de votre niveau d’exigence.
Surtout si vous voulez que l’image soit à un endroit précis, et quelle s’intègre au pixel près.

Le Doctype

Pour commencer il faut mettre tout le monde sur le même pied d’égalité en utilisant un Doctype récent et « strict » en haut de votre page XHTML

Le HTML

Cette étape est de loin la plus facile :

<img src="url">

avec url = l’adresse absolue ou relative de votre image.

Le CSS de la balise Image

C’est la que les choses peuvent devenir étrange.
Si vous voulez inclure votre image dans un lien HTML, vous verrez alors une bordure bleu entourer votre image.
C’est normal, il s’agit de la valeur par défaut.
Pour annuler cet effet vous allez devoir définir une bordure vide

Je vous invite donc à commencer votre feuille de style par :

img {border:none;} 

Gràce à cela toutes les images de votre document n’auront plus de bordures.
C’est à vous d’ajouter des bordures la ou elle sont nécessaires.

L’espace Blanc Magique

Si vous placez une image vous pourrez voir un espace blanc s’ajouter en dessous.
C’est normal, une ligne est ajouté sous la balise image automatiquement.
Pour faire disparaitre cette ligne il faut la supprimer dans l’élément parent de l’image (c’est a dire son conteneur)

Code HTML :

<div id="id_conteneur">
  <img src="">
</div>

Code CSS :

#Id_conteneur {
height: *hauteur_de_l'image_en_pixel* px;
line-height:0px;
font-size:0px; /* for IE */
}

Cela aurai pour effet de faire disparaitre cette ligne, vu que vous allez lui forcer sa hauteur à 0 pixels.
Attention : Si vous voulez mettre du texte dans ce même conteneur, il aura une hauteur de 0 pixel et sera donc INVISIBLE.
Vous devez definir un élément conteneur uniquement pour la(les) balises images.

Cette Astuce fonctionne sous la quasi-totalité des Navigateurs Web en circulations. La liste est disponible ici

Update du css pour IE, il faut font-size à 0.

Update 2009/07/19 du css, ajout de la hauteur de l’image sinon par défaut la hauteur du conteneur vaut : hauteur de l’image + 5 pixels