Search code examples
htmlcssimagemargingaps-in-visuals

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

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/

Solution

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