Comment puis-je comptabiliser l'espace blanc entre les images avec CSS?

Question

J'essaye d'agrandir mes images en utilisant la largeur en CSS pour que mes images soient réactives. Je voudrais avoir 3 images à travers l'écran jusqu'à une certaine largeur maximale, mais l'espace blanc entre les deux réduit l'un après avoir réglé la largeur à 33,3%. J'aimerais toujours le petit espace blanc entre les images, mais je veux que les images couvrent 100% de la largeur de son conteneur. Comment puis-je résoudre ce problème?

img{ 
    width:33.3%; 
} 

Exemple: http://jsfiddle.net/ErNeT/1736/

Answer 1

Tout d'abord, assurez-vous que tous les éléments HTML ont la propriété box-sizing mis à border-box. Ceci s'assure que le remplissage et la frontière sont inclus dans la largeur totale et la taille des éléments. source

img{ 
    box-sizing: border-box; 
    border: 5px solid transparent;//keep your little margins by transparent borders 5px wide 
} 

Vous pouvez modifier la quantité que vous voulez écart entre eux en changeant 5px dans une autre largeur.

Answer 2

Vous pouvez définir font-size: 0; sur le conteneur pour supprimer l'espace, et si vous avez besoin pour soutenir revenir à IE9, vous pouvez utiliser calc() pour calculer la largeur avec la marge. OU vous pouvez utiliser flexbox si vous avez seulement besoin de supporter les navigateurs modernes!

Exemples de deux ici: http://jsfiddle.net/s3cmnpo3/

Answer 3

Essayez ceci:

img{ 
    width:33.3%; 
    float: left; 
}