Mystery padding в ячейках таблицы с изображением

Question

Ненавижу признаться: я создаю сложный, но удобный для Gmail HTML-взлом электронной почты (встроенный стиль). Во всяком случае, это игра из столов и расколотых изображений, и я, кажется, забыл все мои шахматы 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> 

У меня есть тайна 4-пиксельное "заполнение" ниже каждых изображений (панель DOM в Firebug показывает мобильный "clientHeight" 4 пикселя больше, чем мои изображения).

Я пробовал каждую комбинацию устаревшего стиля HTML (высоты и т. Д.) И CSS и без радости.

Итак, как избавиться от 4 пикселей и закрыть промежуток между строками?

Answer 1

Я пробормотал, обвел несколько свойств и оказалось, что установка line-height: 0 устраняет пробел.

Answer 2

Просто используйтеstyle="display: block"на картинке.

Проблема решена.

Answer 3

Сначала я должен был проверить StackOverflow!

Либо:

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

или

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

устранит 4 пикселя под изображением в ячейке таблицы.

Answer 4

Еще один способ исправить - добавить font-size: 0 на td.