удаление пробела из ячейки в таблице html

#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>