2

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>，则图像和跨度之间仍然存在不需要的空间。这是我真正想要摆脱的空间。

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

4

1 回答 1

3

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

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

于 2012-11-28T15:00:40.190 回答