Устранить вертикальные пробелы между изображениями

Question

Я работаю над шаблоном электронной почты. Код выглядит примерно так:

<table width="702" cellpadding="0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>    
</table>

Я всегда получаю вертикальные пробелы между этими двумя изображениями.

Я пытался использовать valign, vspace, но безуспешно. Как от этого избавиться?

Answer 1

Вы получаете пробелы, потому что изображения располагаются в ряд (между двумя рядами линий есть интервал).Вы можете расположить их как элементы блока ....

img { display:block; }

.. или использовать свойство вертикального выравнивания, чтобы определить другое вертикальное выравнивание, которое должно удалить интервал ...

img { vertical-align:top; }

http://vidasp.net/media/CSS-vertical-align.gif

Кстати, пожалуйста, прекратите использовать устаревшие атрибуты (cellpadding, cellspacing, align, border).Для каждого из этих атрибутов есть альтернатива CSS, которую следует использовать.Также используйте некоторый код сброса CSS (например, Yahoo CSS Reset) ...

Answer 2

Странно: Этого не должно быть.

Возможно, почтовый клиент интерпретирует разрыв строки между <img> s как пробел.

Попробуйте установить их прямо рядом друг с другом: <img src...><img src...

Answer 3

Ваши строки достаточно высоки, чтобы вместить текст шрифтом по умолчанию, который больше, чем ваши 11-пиксельные изображения, следовательно, разрыв.

Вам нужно сделать линии меньше; Самый простой способ для вашего примера - уменьшить шрифт:

<td style="font-size: 1px;" align="left" valign="top">

Протестировано в IE 8, Firefox 3.6 и Chrome 6.