Mystery padding w komórkach tabeli z obrazem

Question

Nienawidzę przyznawać, że: Buduję skomplikowany, ale przyjazny pocztą e-mail HTML e-mail blast (inline styling). W każdym razie jest to gra w stoliki i podzielone obrazy, i wydaje mi się, że zapomniałem wszystkich moich mojo z 1995 roku.

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> 

mam tajemnicą 4-pikselowego "wyściółkę" pod każdym obrazów (panel DOM w Firebug pokazuje komórka "clientHeight" 4 piksele większe niż moich obrazów).

Próbowałem każdej kombinacji przestarzałych stylów HTML (wysokości, itp.) I CSS i bez radości.

Po prostu, jak pozbyć się 4 pikseli i zamknąć lukę między wierszami?

Answer 1

Poruszałem się z wieloma właściwościami i wygląda na to, że ustawienie line-height: 0 usuwa przerwę.

Answer 2

Po prostu użyjstyle="display: block"na obrazie.

Problem rozwiązany.

Answer 3

Najpierw powinienem był sprawdzić StackOverflow!

albo:

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

lub

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

wyeliminuje 4 pikseli pod obrazem w komórce tabeli.

Answer 4

Innym sposobem naprawy jest dodanie font-size: 0 na td.