不需要的表格单元格填充答案

【问题标题】：Unwanted table cell padding不需要的表格单元格填充
【发布时间】：2013-09-26 08:54:32
【问题描述】：

我正在为客户创建简报。我在第一个内表的最顶部 td 单元格上存在填充问题。我不知道为什么它会在 td 的底部创建这个额外的填充。我已经尝试过内联 css 高度，将其上的所有填充和边距归零，但我仍然没有运气摆脱两个内表之间的空白。我将不胜感激任何帮助。我可能忽略了一些简单的事情，但我已经没有想法了。

带有电子邮件模板的页面：http://www.bemidjimillworks.com/email_templates/Default-Template.html

我指的 td 就是这个：

<td style="width:600px;padding:0;margin:0;">
     <a href="http://www.bemidjimillworks.com">
         <img src="http://www.bemidjimillworks.com/images/newsletter/01_header.jpg" />
     </a>
</td>

【问题讨论】：

您的确切意思是哪个<td>？内容是什么？

为什么你有这么多？我认为您可以在一个和三个中创建相同的内容。有什么原因吗？

@chopper 第一个包含 01_header.jpg 图像的

。

@user2719346 我正在嵌套表格，主要是因为我不必过多地弄乱 colspan。我通常不会那样做，但由于垂直图像缩略图就在 ul 旁边，所以我不确定如何在不使用 div 的情况下完成它。

标签： html css html-table newsletter

【解决方案1】：

只需将 css 属性 vertical-align: top; 添加到顶部图像

<img src="http://www.bemidjimillworks.com/images/newsletter/01_header.jpg" style="vertical-align: top;">

【讨论】：

是的，做到了。我可能没想过要试试。谢谢。

【解决方案2】：

在 html 电子邮件中最广泛支持的垂直对齐方式是使用 html 元素 valign="top"。这被认为是 html 电子邮件设计中的最佳实践。

CSS vertical-align 建议，is not fully supported 在主要电子邮件客户端 (Outlook) 中，会给你不一致的结果。

应用于您的示例：

<td valign="top" style="width:600px;padding:0;margin:0;">
     <a href="http://www.bemidjimillworks.com">
         <img src="http://www.bemidjimillworks.com/images/newsletter/01_header.jpg" />
     </a>
</td>

【讨论】：