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.