Mystery padding in table cells with image

Question

I hate to admit this: I'm building a complicated, but gmail-friendly HTML email blast (inline styling). Anyway, it's a game of tables and split images, and I've seemed to have forgotten all my 1995 table mojo.

http://www.highgatecross.com/development/tables/

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="skyline.jpg" alt=""></td>
        <td><img src="skyline-02.jpg" alt=""></td>
        <td><img src="skyline-03.jpg" alt=""></td>
    </tr>
    <tr>
        <td colspan="3"><img src="skyline-04.jpg" alt=""></td>
     </tr>
</table>

I have a mystery 4-pixel "padding" below each images (the DOM panel in Firebug shows a cell "clientHeight" 4 pixels greater than my images).

I have tried every combination of deprecated HTML styling (heights, etc.) and CSS and no joy.

So, simply, how do I rid the 4 pixels and close the gap between rows?

Answer 1

I fiddled around with a number of properties and it appears that setting line-height: 0 removes the gap.

Answer 2

Just use style="display: block" on the image.

Problem solved.

Answer 3

I should have checked StackOverflow first!

Either:

<img src="some.jpg" style="display: block" />

or

<img src="some.jpg" style="vertical-align: bottom" />

will eliminate the 4 pixels under the image in a table cell.