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

Question

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

If you right-click on the red cell around the image and click Inspect Element, you will see that although the IMG element is 200 pixels high, the TR and TD elements around it are 205 pixels high. Why is its height greater than the image? How to get rid of this extra height?

This problem does not occur if the contents of the TD element is text instead of IMG, as 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

. :

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

jsFiddle

Answer 2

0 ""

cellpadding cellpacing CSS?

Answer 3

Just add this to your current CSS:

table {
    border-collapse:collapse;
} 

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