Utilisez le CSS pour supprimer l'espace entre les images

Question

Étant donné :

<img src="..."/>
<img src="..."/>

Le résultat est deux images avec un seul espace entre elles. Il semble que le comportement normal consiste à afficher un nombre quelconque d'espaces, de retours à la ligne et de tabulations comme un seul espace blanc. Je sais que je peux faire ce qui suit :

<img src="..."/><img src="..."/>

OU

<img src="..."/><!--
--><img src="..."/>

OU

<img src="..."/
><img src="..."/>

Ou un certain nombre d'autres astuces. Existe-t-il un moyen de supprimer ces espaces avec une feuille de style en cascade ?

<div class="nospace">
    <img src="..."/>
    <img src="..."/>
</div>

Answer 1

Faites-les display: block dans votre CSS.

Answer 2

Une méthode simple et compatible avec presque tous les pays consiste à définir les paramètres suivants font-size: 0 sur le conteneur, à condition que vous n'ayez pas de nœuds de texte descendants à styliser (bien qu'il soit trivial d'outrepasser cela si nécessaire).

.nospace {
   font-size: 0;
}

jsFiddle .

Vous pouvez également modifier la valeur par défaut display: inline en block o inline-block . Veillez à utiliser le solutions de contournement nécessaires pour <= IE7 (et éventuellement les anciens Firefox) pour inline-block pour travailler.

Answer 3

La meilleure solution que j'ai trouvée pour cela est de les contenir dans une div parent, et de donner à cette div une taille de police de 0.

Answer 4

Je préfère faire comme ça

img { float: left; }

pour supprimer l'espace entre les images

Answer 5

L'utilisation d'un attribut de style dans la balise img pour faire flotter l'image à gauche fonctionne également.

<img onclick="zero('moose')" src="zero.bmp" style="float: left;"/>