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

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

<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, но не повезло. Как избавиться от него?

источник

2010-10-04 MANnDAaR

один вопрос, как вы получите эти два изображения в одной строке, если есть ширина таблица меньше изображений ... Если я понимаю, что у вас проблема с вертикальным белым пространством ???? если изображения меньше и подходят внутри, эта проблема имеет решение в ответе 1. В вашем примере изображения одно под другим, и нет вертикальных пробелов – jatt

U поймал меня! в то время как набрав, я ошибочно набрал ширину ..... Я исправляю это! – MANnDAaR

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

img { display:block; }

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

img { vertical-align:top; }

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

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

источник

2010-10-04 10:12:53

@ Šime он строит электронную почту, где все еще нет способа обойти эти атрибуты, так как поддержка CSS очень шаткая –

Эй! ваш дисплей ответа: блок работал идеально. Благодаря! Я работаю над шаблонами электронной почты, и 90% почтовых клиентов понимают только cellpadding, cellpacing, align, border .. они еще не знают css3 и html5. – MANnDAaR

Замена атрибутов HTML на CSS существует уже давно, и это не связано с CSS 3. Я мало знаю о HTML-сообщениях электронной почты, но если вы можете использовать элемент STYLE для размещения CSS внутри, тогда вы должен иметь возможность использовать свойства padding, border, text-align, vertical-align и другие свойства CSS 2.1 (конечно, только если эти свойства поддерживаются, вы должны проверить) –

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

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

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

источник

2010-10-04 10:09:20

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

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

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

Испытано в IE 8, Firefox 3.6 и Chrome 6.

источник

2010-10-04 10:15:41 RichieHindle

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

ответ

Смежные вопросы