imagenes - tablas html

Acolchado misterioso en celdas de tabla con imagen.

Question

Odio admitir esto: estoy creando una explosión de correo electrónico HTML complicada, pero amigable con gmail (estilo en línea). De todos modos, es un juego de tablas e imágenes divididas, y parece que he olvidado todo mi mojo de 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>

Tengo un "relleno" misterioso de 4 píxeles debajo de cada imagen (el panel DOM en Firebug muestra una celda "clienteHeight" 4 píxeles mayor que mis imágenes).

He probado todas las combinaciones de estilos HTML en desuso (alturas, etc.) y CSS y sin alegría.

Entonces, simplemente, ¿cómo libero los 4 píxeles y cierro la brecha entre las filas?

Answer 1

¡Debería haber revisado StackOverflow primero!

Ya sea:

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

o

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

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

Answer 2

Jugué con una serie de propiedades y parece que al establecer line-height: 0 elimina la brecha.

Answer 3

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

Answer 4

Simplemente use style="display: block" en la imagen.

Problema resuelto.