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

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

Problem solved.

Answer 2

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.