CODEWITHSUNDEEP
htmlcssimagemargingaps-in-visuals
anonymous
anonymous

Reputation: 1539

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/

Upvotes: 1

Views: 228

Answers (9)

BentOnCoding
BentOnCoding

Reputation: 28168

This worked for me just now:

img
{  
    display: block;
}

Upvotes: 0

Pete Wilson
Pete Wilson

Reputation: 8694

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

Upvotes: 0

Hussein
Hussein

Reputation: 42818

Simply your css by doing,

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

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

Upvotes: 0

Kamiel Wanrooij
Kamiel Wanrooij

Reputation: 12404

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/

Upvotes: 2

Brandon
Brandon

Reputation: 1442

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

Upvotes: 0

Sotiris
Sotiris

Reputation: 40066

add in both display:block;

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

Upvotes: 1

Aaron Hathaway
Aaron Hathaway

Reputation: 4315

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.

Upvotes: 3

Bogdan Silivestru
Bogdan Silivestru

Reputation: 146

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

Upvotes: 0

Luke
Luke

Reputation: 1233

You can float and clear them:

img {
    clear: both;
    float: left;
}

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

Upvotes: 0

Related Questions