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 に答える