空間圖像和跨度之間顯示內錨

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/