Mystery padding in table cells with image

html

Solution

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

Problem solved.

Problem

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?

Original source