D'où vient cet écart et comment s'en débarrasser?

Question

Code simple:

<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" />
        <img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>

Deux images ont une marge et un rembourrage de 0 mais il y a toujours un écart entre eux.

Comment éviter ce comportement?

Et oui, ce n'est pas une erreur, le tout doit être dans une étiquette.

Exemple:

http://jsfiddle.net/fqrfu/

Answer 1

Les deux images sont affichées en ligne. Cela signifie que la ligne de base de l'image est alignée sur la ligne de base du texte. Ci-dessous, il y a généralement plus d'espace pour tenir compte des lettres comme pjgq qui descendent en dessous de la base de référence.

Faire juste les images display: block; résout cela dans votre scénario.

Cette page décrit très clairement votre situation: http://devedge-temp.mozilla.org/viewsource/2002/img-table/

Answer 2

Je crois que c'est la hauteur de ligne qui cause le problème. Vérifiez-le.

Sur une note différente, je sais que vous avez dit que c'était censé être ainsi, mais c'est en fait invalide (?) HTML d'avoir le div Tag à l'intérieur de l'ancre. Essayer d'utiliser spans à la place.

Answer 3

Ajouter les deux display:block;

Démo: http://jsfiddle.net/fqrfu/22/

Answer 4

Vous pouvez les flotter et les effacer:

img {
    clear: both;
    float: left;
}

http://jsfiddle.net/lukemartin/fqrfu/11/

Answer 5

<a href="#">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" />
    </div>
</a>

Answer 6

Avez-vous un problème dans IE? Essayez de mettre les deux balises d'images sur la même ligne dans le HTML, sans aucun espace entre ...

Answer 7

Simplement votre CSS en faisant,

.image, .shadow {
    margin: 0;
    padding: 0;
    display:block;
}

http://jsfiddle.net/fqrfu/43/

Answer 8

Ce que Bogdan a dit, ou:

<div> <img src="http://dummyimage.com/600x400/000/fff&text=image" class="image" /><img src="http://dummyimage.com/600x15/000/fff" alt="" class="shadow" /> </div> </a>

Voir, l'espace entre /> et le deuxième <img est réellement rendu, ce qui donne l'espace entre les deux photos.

- Pete

Answer 9

Cela a fonctionné pour moi tout à l'heure:

img
{  
    display: block;
}