HTML 电子邮件 - 表格行之间的空白答案

【问题标题】：HTML email - white space between table rowsHTML 电子邮件 - 表格行之间的空白
【发布时间】：2013-12-02 09:14:36
【问题描述】：

我正在构建一组电子邮件明信片，但在某些版本的 Outlook 和 Gmail 中会在某些（但不是所有）表格行之间创建不需要的空格时遇到了麻烦。

我是 HTML 电子邮件编码的新手，需要帮助进行故障排除 - 谁能告诉我需要更改我的代码中的哪些内容才能解决此问题？

这是我的测试页面：http://www.kristi.net/holidaycards/card_test.html

这是一个在 Outlook 中显示问题的屏幕截图：http://i43.tinypic.com/34ezrc3.gif

这些客户受到影响：

展望 2007
展望 2010
展望 2013
Gmail (Android)
Gmail（资源管理器）
Gmail (Chrome)

另外，为了让您知道，用户将在他们的浏览器中打开 HTML，然后将内容复制粘贴到他们的电子邮件客户端 (Outlook) 中，然后再自定义文本并发送消息。

【问题讨论】：

标签： outlook gmail whitespace html-email tabular

【解决方案1】：

尝试将vertical-align: middle; 样式添加到您的图像中，例如：

<img alt="" src="" width="500" height="50" style="verticla-align: middle;">

对我来说，只添加这种样式就足够了。

【讨论】：

【解决方案2】：

您的图片上需要style="display:block;"。试试这样的：

<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">

您应该注意，如果有人将您的电子邮件从 Outlook 转发出去，这些差距是不可避免的。因此，最好垂直分割图像。

这应该让你开始：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="500" valign="top">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td height="200" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
            Content here...
          </td>
        </tr>
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

【讨论】：