Afficher une Image en HTML sans espace

21 septembre 2008 par: Benoit Bonneville

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

Filed under: Développement

Commentaires

2 commentaires à “Afficher une Image en HTML sans espace”
  1. j marie dit :

    je trouve cet article tres bien formuler avec des explications claires et tres nettes . continue comme ca je suis sur que tu iras tres loin ; j ai confiance en toi et ta reussite

  2. benoit dit :

    Pour supprimer completement les espace il faut coller les balises entre elle si vous en mettez plusieurs sous IE6

    Ce meme bug d’espace peu se reproduire entre des champs input sous Chrome, IE et Safari.

    Bref collez vos balises ! sans espace ni retour à la ligne.

Répondre à j marie