There is always a little space under images inside a table

Question

I'll provide direct link for people who wants to see it live.

Just hover one of the table listing and you'll see there is always a small space under images. I've tried padding, margin, searched stackoverflow for it and used border spacing, border collapse etc. but nothing helped so far.

I would like your help. What's the problem and what am I missing?

Answer 1

Add display: block to img.

    .browseBuilds_piece img{
       display:block
     }

Answer 2

Problem isn't the table actually, img tags are inline elements and have that bottom spacing by default (something with line-height I guess, don't really know why).

Solution: div.browseBuilds tr.browseBuilds_piece img { display: block; }

Answer 3

See this similar question. Because img is an inline element, whitespaces in the HTML source code around the img tag matter and will be displayed. Either remove the whitespaces from the code

<td style="vertical-align: middle;"><img src="./themes/default/images/builds/eski.jpg"></td>

or display the img as a block element, as Michal has pointed out.