tablas tabla imagenes formato ejemplos diseƱo con bordes avanzado html

imagenes - tablas html



Acolchado misterioso en celdas de tabla con imagen. (4)

¡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.

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?


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


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


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

Problema resuelto.