web-dev-qa-db-fra.com

Comment puis-je éliminer l'espacement entre les éléments en ligne dans CSS?

J'ai un div avec un tas de balises d'image à l'intérieur, voici un exemple:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Parce qu'il y a un espace entre les balises, les navigateurs afficheront un espace entre les images (Chrome décide de 4px). Comment puis-je dire au navigateur de ne montrer AUCUN espace blanc entre les images, sans placer le> et le <l'un à côté de l'autre? Je sais que l'espacement des lettres s'applique en plus de ce que le navigateur décide d'utiliser, donc c'est inutile même avec une valeur négative. Fondamentalement, je vais chercher quelque chose comme Twitter au bas de leur page d'accueil. J'ai regardé leur code et ils utilisent une liste non ordonnée. Je pourrais simplement le faire, mais j'aimerais avoir une explication technique pour expliquer pourquoi il semble qu'il n'y ait aucun moyen d'éliminer l'espace blanc entre ces images.

htmlcsswhitespaceremoving-whitespace
32
Jake Petroules

essayez d'ajouter img {margin:0;padding:0;float:left}

en d'autres termes, supprimez les margin et padding par défaut des navigateurs pour img et float.

Démo: http://jsfiddle.net/PZPbJ/

12
Sotiris

Si pour une raison quelconque vous voulez le faire:

  • sans utiliser floats, et;
  • sans réduire l'espace blanc dans votre code HTML (qui est la solution la plus simple, et pour ce que ça vaut, ce que Twitter fait)

Vous pouvez utiliser la solution à partir d'ici:

Comment supprimer l'espace entre les éléments du bloc en ligne?

Je l'ai affiné légèrement depuis lors.

Voir: http://jsfiddle.net/JVd7G/

letter-spacing: -1px est de réparer Safari.

div {
    font-size: 0;
    letter-spacing: -1px
}

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>
27
thirtydot

Solution la plus simple qui ne détruit pas la mise en page et préserve la mise en forme du code:

<div style="margin: 0; padding: 0; border: 0;">
       <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
    --><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
    --><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>
25
ThinkingStiff

L'espacement provoque le déplacement des images car elles sont des éléments en ligne. Si vous souhaitez les empiler, vous pouvez utiliser la liste non ordonnée (comme le fait Twitter) car cela mettra chaque image dans un élément de bloc.

Les éléments en ligne sont affichés en ligne avec le texte.

2
Adam Hutchinson

Vous pouvez également faire en sorte que toutes les ancres flottent à gauche et définissent la marge gauche à -1

0
Cata

Si vous diffusez vos pages avec Apache, vous pouvez utiliser le module Google PageSpeed. Cela a des options que vous pouvez utiliser pour réduire les espaces blancs:

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

Vous n'avez pas besoin d'utiliser les options les plus "dangereuses" de PageSpeed.

Consultez également les réponses à cette question pour savoir comment supprimer les espaces en CSS:

Ignorer les espaces en HTML

0
ʍǝɥʇɐɯ

Il semble que l'utilisation d'un tableau soit la bonne façon de procéder, car les espaces blancs n'ont aucun effet entre les cellules.

0
Daniel F