How to get rid of the extra height in TR and TD when it contains an IMG element?

Question

I have demonstrated my issue in this JSFiddle: http://jsfiddle.net/6jJaF/

If you right click on the red cell around the image, and click 'Inspect Element', you'll see that even though the IMG element is 200px in height, the TR and TD elements around it are each 205px in height. Why is its height greater than the image? How to get rid of this extra height?

This problem doesn't occur if the content of the TD element is text instead of IMG as can be seen in the second TABLE in this example.

Here is the HTML code.

<table>
    <tr>
        <td><img src="http://i.imgur.com/dj7aqdo.jpg"/></td>
    </tr>
</table>

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

Here is the CSS code.

td {
    padding: 0;
    background: red;
    height: 200px;
}

img {
    height: 200px;
}

Answer 1

Set the vertical alignment of the image. For example:

img {
    height: 200px;
    vertical-align:top;
}

jsFiddle example

Answer 2

You need to set the cell padding and cell spacing to 0 and "collapse"

Set cellpadding and cellspacing in CSS?

Answer 3

Simply add this to your current CSS:

table {
    border-collapse:collapse;
} 

Demo: http://jsfiddle.net/6jJaF/2/