空间在锚点内的图像和跨度之间显示

Question

http://jsfiddle.net/mblase75/CdX2b/

HTML：

<figure class="onecolumn buttoncaption">
    <a href="ss.html"><img src="http://i.imgur.com/NEMwO.jpg" width="230" height="140" alt="photo">
    <span class="caption">Oswego<br>Panda Express</span></a>
</figure>​

小提琴中有很多CSS，但是给我带来麻烦的部分是<a>标签上的渐变：

background: #BB233C;
background: -moz-linear-gradient(top, #7F1527 0%, #BB233C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7F1527), color-stop(100%,#BB233C));

......等等。我不能让渐变停止在图像下面显示 - 如果它是纯红色则不会有问题，但它是暗红色和浅色之间的可见变化。

如果我从<a>中移除渐变并仅将其应用于<span>，我仍然会在图像和跨度之间留下不需要的空间。这是我真正试图摆脱的空间。

关于是什么导致它的任何想法？我尝试将边距，填充和行高设置为零，没有任何变化。

Answer 1

终于找到了解决方案 - 我需要将display:block;添加到图像中（它已经应用于跨度）。这样做完全消除了空间。

http://jsfiddle.net/mblase75/CdX2b/3/