Where this gap comes from and how to get rid off it?

Question

Simple code:

<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>

Two images have margin and padding of 0 but there's still a gap between them.

How to avoid this behavior?

And YES that's not a mistake, the whole thing has to be in A tag.

Example:

http://jsfiddle.net/fqrfU/

Answer 1

The two images are displayed inline. This means the baseline of the image is aligned with the baseline of the text. Below text there usually is some more space to account for letters like pjgq that go below the baseline.

Just making the images display: block; resolves this in your scenario.

This page describes your situation quite clearly: http://devedge-temp.mozilla.org/viewsource/2002/img-table/

Answer 2

You can float and clear them:

img {
    clear: both;
    float: left;
}

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

Answer 3

<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 4

I believe it's the line-height that's causing the problem. Check it out.

On a different note, I know you said it was intended to be that way but it's actually invalid(?) HTML to have the div tag inside of the anchor. Try using spans instead.

Answer 5

add in both display:block;

Demo: http://jsfiddle.net/fqrfU/22/

Answer 6

Are you having a problem in IE? Try putting both images tags on the same line in the HTML, w/o any spaces in between...

Answer 7

This worked for me just now:

img
{  
    display: block;
}

Answer 8

Simply your css by doing,

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

http://jsfiddle.net/fqrfU/43/

Answer 9

What Bogdan said, or:

<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>

See, the whitespace between /> and the second <img is actually rendered, which gives the space between the two pics.

-- pete