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>​

There’s a lot of CSS in the fiddle, but the part giving me trouble is the gradient on the <a> tag:

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));

…and so on. I can’t get the gradient to stop showing up just under the image — it wouldn’t be a problem if it was solid red, but it’s a visible change between dark red and light.

If I remove the gradient from the <a> and apply it only to the <span>, I still have an unwanted space between the image and the span. It’s this space I’m really trying to get rid of.

Any ideas on what’s causing it? I tried setting margins, padding, and line-height to zero, with no change.

Answer 1

Finally found the solution — I needed to add display:block; to the image (it was already applied to the span). Doing this eliminated the space completely.

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