Mystery padding in table cell con image

Question

Odio ammetterlo: sto creando un complicato, ma scomodo email HTML in stile Gmail (stile in linea). Ad ogni modo, è un gioco di tavoli e immagini divise, e mi è sembrato di aver dimenticato tutto il mio tavolo del 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> 

Ho un mistero 4-pixel "padding" sotto ogni immagine (il pannello di DOM in Firebug mostra un "clientHeight" cella 4 pixel maggiore di mie immagini).

Ho provato ogni combinazione di stile deprecato HTML (altezze, etc.) e CSS e nessuna gioia.

Così, semplicemente, come faccio a liberare il 4 pixel e colmare il divario tra le righe?

Answer 1

I armeggiò con una serie di proprietà e sembra che modificando line-height: 0 rimuove il gap.

Answer 2

Basta usarestyle="display: block"sull'immagine.

Problema risolto.

Answer 3

Avrei dovuto controllare StackOverflow prima!

O:

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

o

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

eliminerà i 4 pixel sotto l'immagine in una cella.

Answer 4

Un altro modo per risolvere è aggiungere font-size: 0 su td.