Relleno de misterios en las celdas de la tabla con la imagen

Question

Odio admitir esto: estoy creando una explosión de correo electrónico HTML complicada, pero compatible con gmail (estilo en línea). De todos modos, es un juego de tablas e imágenes divididas, y parece que olvidé todo el mojo de la mesa de 1995.

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> 

que tienen un misterio de 4 píxeles "relleno" por debajo de cada imagen (el panel de DOM en Firebug muestra una célula "clientHeight" 4 píxeles mayor que mis imágenes).

He intentado todas las combinaciones de estilo HTML en desuso (alturas, etc.) y CSS, y no me gusta.

Así que, simplemente, ¿cómo libero los 4 píxeles y cierro el espacio entre las filas?

Answer 1

He jugueteado con una serie de propiedades y parece que el ajuste line-height: 0 elimina la brecha.

Answer 2

Solo usestyle="display: block"en la imagen.

Problema resuelto.

Answer 3

¡Debería haber comprobado StackOverflow primero!

O bien:

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

o

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

eliminará los 4 píxeles en virtud de la imagen en una celda de la tabla.

Answer 4

Otra forma de solucionarlo es agregar font-size: 0 en el td.