web-dev-qa-db-fra.com

Images côte à côte sans espace entre elles

J'ai une grille d'images avec un espace entre elles. Comment puis-je supprimer cet espace?

J'ai déjà essayé de régler les padding et margin des images sur 0px, mais cela n'a pas fonctionné.

Des idées?

htmlcssimage
16
costi

Assurez-vous que votre balise HTML ne contient aucun espace. Alors changez:

<img src="" alt="" /> <img src="" alt="" />

à 

<img src="" alt="" /><img src="" alt="" />

Parfois, les espaces peuvent aussi se cacher à la fin des nouvelles lignes. Assurez-vous donc de vérifier la fin des lignes si votre code HTML ressemble à 

<img src="" alt="" /> 
<img src="" alt="" />

Modifier

Au lieu d'écrire: <img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" /> 87 fois, il suffit de mettre ceci dans votre fichier css:

div img { margin: 0;
    width: 300px;
    height: 300px;
}

et alors vous pouvez simplement faire vos images <img src="imgs/img8.jpg" alt="img8" />

30
JakeParis

ajoutez font-size:0px à la div, vous pouvez continuer à conserver les éléments img sur des lignes de code distinctes

18
Yaary

Si vous utilisez float: left sur les images et que vous séparez chaque ligne avec un séparateur avec un clear: both, il ne doit y avoir aucun espace entre les images.

2
Refugee

Essayez de mettre deux images sur la même ligne comme:

<img src="imgs/img0.jpg" style="margin: 0; width: 300; height: 300;" /><img src="imgs/img1.jpg" style="margin: 0; width: 300; height: 300;" />

et voir si cela change quelque chose. Je vous suggère également de suivre les conseils sur l'utilisation de CSS pour simplifier tous les styles d'image. Parce que maintenant, vous devez modifier manuellement chaque valeur si vous souhaitez modifier les tailles d'image.

Malheureusement, HTML a parfois des problèmes stupides d’espace blanc.

0
Hanna

Les paramètres que vous devez mettre à zéro sont le remplissage, la bordure et la marge. Sur les images elles-mêmes et tout conteneur entre les deux.

0
Javier