Rembourrage/Marge pour les images dans un DIV

Question

Ok. J'ai récemment fait quelques mises à jour sur ce site.

http://annberingerart.com/index.php

À faire quelques modifications mineures, il semble que la marge et le rembourrage pour les images sur la page d'index a changé. Je voudrais qu'il y ait un remplissage égal verticalement et horizontalement entre toutes les images ainsi qu'une marge cohérente. En outre, je visualisais le site Web sur le MAC d'un ami avec Safari 5 installé et l'emballage entier semblait avoir rétréci en taille parce qu'il ne pouvait pas contenir ses enfants comme il l'avait fait avant que je fasse les changements.

Vous pouvez jeter un oeil à la CSS dans firebug car il serait long et excessif d'afficher plus de 400 lignes de CSS ici.

Toute critique est la bienvenue, mais je veux surtout des conseils sur la façon de résoudre ce problème.

Answer 1

Votre marge horizontale est causée par des espaces/des lignes nouvelles parce que les images sont des éléments en ligne (sorte de bloc inline vraiment ...).

Si vous faites flotter les images, vous aurez plus de contrôle sur les marges exactes au lieu de dépendre de la largeur d'un espace/nouvelle ligne.

Pour résoudre votre problème, vous pouvez:

• flotter les images gauche;
• donner à l'emballage un rembourrage à gauche, pas de rembourrage à droite et overflow:hidden;
• donne à toutes les images un rembourrage de droite (le même que le rembourrage gauche de l'emballage).