Pourquoi mes images ont-elles un espacement supplémentaire?

Question

Quelqu'un peut-il me dire ce qui cause l'espace en dessous des images? Il semble y avoir un rembourrage supplémentaire dans les divs avec la bordure rouge relative aux images. Je ne peux pas trouver cet espacement dans firebug du tout.

Baffled.

alt text http://antony.co.za/so.jpg

Answer 1

Par défaut, les images alignent leurs bords inférieurs avec la ligne de base du texte. Cet espace que vous voyez est l'espace au-dessous de la ligne de base, utilisé par les déciseurs comme q, p, y, etc. (Le fait que vous n'ayez pas de texte n'est pas pertinent - l'espace pour eux est toujours réservé.)

Débarrassez-vous comme suit:

img { /* Or a suitable class, etc. */ 
    vertical-align: bottom; 
} 

Answer 2

peut-être un rembourrage probablement lié, il est la div contenant l'image? Pourrait probablement aider si vous avez posté un lien, si possible.

Answer 3

Il va probablement l'alignement vertical - vérifier le style calculé pour voir ce qu'il est actuellement pour les images, puis essayez d'ajouter ceci à votre feuille de style:

img { vertical-align: text-bottom; } 

Voir That mysterious gap under images et What is Vertical Align quelques exemples de que ce passe-t-il.

Answer 4

L'utilisation du fond à alignement vertical est une solution qui fonctionne.

Puisque vous ne semblez pas utiliser des images en ligne avec le texte bien, l'approche que je prendrais est de rendre les éléments de type bloc images:

img { 
    display: block; 
}