How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

Question

I have two elements A, B which I want to position either AB or BA using CSS only.

I ended up using display: table so my HTML looks something like this:

 <li>
   <a href="#">
      <span class="bottom-caption">Caption</span>
      <img src="www.foo.com" alt="" />
   </a>
 </li>

with CSS being:

 li a { display: table; }
 li a > img { display: table-row-group; }
 li a > span.bottom-caption { display: table-footer-group; }
 li a > span.top-caption { display: table-header-group; }

By placing the span before the image I can set the image CSS depending on the span (span ~ img) while still being able to place the caption above or below the image by simply changing the class.

My only problem is a small gap between image and caption when the caption is on the bottom and I am finding no way to remove this gap.

JSBIN: jsbin

Question:
Where does the gap come from and how do I remove it? I tried everything from positioning to border-collapse to line-height, but can't get it to go.

Answer 1

Sometimes Firefox does some stuff that baffles me for weeks,
This seems to be one of those.

However the good news is, it is fixable (in your use-case) with no side-effects in other browsers.

Just add a float:left; to the img element, as in:

li a > img { display: table-row-group; float:left; }

That seems to get rid of the unwanted space.