Unwanted space between table rows/cells, for the 532nd time

Question

Tables beat me again.

I have a very simple one here:

<table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;">
  <tr style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
    <td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
      <img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" alt="" style="width: 100%;">
    </td>
  </tr>
  <tr style="background-color: grey; margin: 0; padding: 0; border: none; border-collapse: collapse;">
    <td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">Hehehehehehe</td>
  </tr>
</table>

Fiddle: http://jsfiddle.net/ohys4x2o/

I think I already added too much of styles like border: none; padding: 0; and so on to the code - yet still there's an unwanted space between the row with the cat and the grey one with "Hehehe" text.

Table gurus welcome. Please, help. Please. Those tables.. they.. kill me...

Answer 1

Set the vertical alignment on the image to top:

img {
  vertical-align:top;
}

jsFiddle example

By default it's set to baseline and reserves space for descender text elements (e.g. g, y, j)

Answer 2

The problem is the image, not the table. Similar to this other question, the image is including the extra pixels because it is an "inline-block" element. If you add "display:block" to the image it will remove the space.