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

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/