Question

我有一个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电子邮件客户端中的文本之间有一些空白。

我如何摆脱它？

Answer 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;   
}

你可以看到它in action here。

Answer 2

上面的答案对我没有帮助。对于outlook 2003，请尝试以下方法。

没有css要求。

只需在图片标记上添加vspace =“0”hspace =“0”即可删除空格。

<img src="........" vspace="0" hspace="0" />

如果您的图片上有链接，那么您可以通过在img标签上使用border：none和在标签上使用无文字装饰来取消使用css的边框。

<a href="#" style="text-decoration:none;"> <img src="imagename.jpg" vspace="0" hspace="0" style="border:none;" /> </a>

通过添加0

的填充来取消td上的填充

<td style="padding: 0;"> <a href="#" style="text-decoration:none;"> <img src="imagename.jpg" vspace="0" hspace="0" style="border:none;" /> </a> </td>

从html表中的单元格中删除空格

2 个答案: