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

Question

我正在制作一组电子邮件明信片，但遇到了某些版本的 Outlook 和 Gmail 在某些（但不是全部）表行之间创建不需要的空格的问题。

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

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

下面是显示 Outlook 中问题的屏幕截图： http://i43.tinypic.com/34ezrc3.gif

这些客户受到影响：

Outlook 2007
Outlook 2010
Outlook 2013
Gmail (Android)
Gmail (资源管理器)
Gmail (Chrome)

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

Answer 1

你需要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>