#html #css #outlook
#HTML #css #outlook
Вопрос:
У меня есть таблица html в виде
<table width="600" cellspacing="0" cellpadding="0">
<tr>
<td><img src="image.jpg" width="600" height="170" style="padding:0; margin:0;"></td>
</tr>
<tr>
<td>
<p style="padding:0; margin:0;">Text</p>
</td>
</tr>
</table>
Несмотря на указание отступа, поле равно 0. Я вижу некоторое пустое пространство между изображением и текстом в почтовых клиентах Outlook 2003, 2002.
Как мне избавиться от этого?
Комментарии:
1. Попробуйте добавить
border="0"
тег table.
Ответ №1:
Скорее всего, вы видите высоту строки <td>
. Используйте следующий CSS, чтобы удалить его вместе со всеми пробелами:
/* Gets rid of table cell whitespace */
table td {
line-height: 0;
font-size: 0;
}
/* Sets the font and line height correctly for the paragraph of text */
table td p {
line-height: 14px;
font-size: 14px;
}
Вы можете увидеть это в действии здесь.
Ответ №2:
приведенный выше ответ мне не помог. для Outlook 2003 попробуйте следующее.
css не требуется.
просто добавьте vspace=»0″ hspace=»0″ в тег изображения, чтобы удалить пробелы.
<img src="........" vspace="0" hspace="0" />
если на вашем изображении есть ссылка, вы можете удалить границу с помощью css, указав border:none в теге img и text-decoration с none в теге a.
<a href="#" style="text-decoration:none;">
<img src="imagename.jpg" vspace="0" hspace="0" style="border:none;" />
</a>
снимите отступы в td, добавив отступ 0
<td style="padding: 0;">
<a href="#" style="text-decoration:none;">
<img src="imagename.jpg" vspace="0" hspace="0" style="border:none;" />
</a>
</td>