内联块链接大于图像内部

Question

我有一组用锚标签包装的图像。锚标记设置为显示内联块，因此它们彼此相邻：

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

以下是我的风格：

div {
    width: 100%;
}

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

div a img {
    width: 100%;
}

问题是锚链的高度比里面的图像高几个像素。这会在每个链接下方产生空白。

这是jsfiddle：http://jsfiddle.net/o0b2wnr9/1/

如果您使用Firebug或其他浏览器工具，您可以看到锚链接比内部图像高4px。

任何人都知道为什么会这样吗？