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

Мне не нравится это признавать: я создаю сложный, но удобный для 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 пикселя и закрыть промежуток между строками?

Ответ 1

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

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

Ответ 2

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

Или:

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

или

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

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

Ответ 3

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

Ответ 4

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