Q:

space is showing between image and span inside anchor

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.

A:

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/

