0

I have a collection of images that are wrapped in anchor tags. The anchor tags are set to display inline-block, so they all appear next to each other:

<div>        
    <a href="#"><img src="..." /></a>
    <a href="#"><img src="..." /></a>
    <a href="#"><img src="..." /></a>
    <a href="#"><img src="..." /></a>
</div>

Here are my styles:

div {
    width: 100%;
}

div a {
    width: 20%;
    display: inline-block;    
}

div a img {
    width: 100%;
}

The problem is that the height of the anchor link is a few pixels more than the image inside. This causes a whitespace below each link.

Here's the jsfiddle: http://jsfiddle.net/o0b2wnr9/1/

If you use Firebug or another browser tool, you can see that the anchor links are 4px taller than the images inside.

Anyone know why this is happening?

Steven
  • 18,761
  • 70
  • 194
  • 296

0 Answers0