HTML电子邮件 - 表行之间的空白(HTML email - white space betwee

我建立了一套电子邮件明信片，并已运行到与Outlook和Gmail创建某些（但不是全部）表行之间的不必要空间的某些版本的麻烦。

我是相当新的编码的HTML电子邮件和需要帮助排查 - 谁能告诉我需要的东西在我的代码进行更改来解决这个问题？

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

这里是显示在Outlook中的问题的屏幕帽： http://i43.tinypic.com/34ezrc3.gif

这些客户会受到影响：

展望2007
展望2010年
展望2013
Gmail的（安卓）
Gmail的（浏览器）
Gmail的（铬）

此外，只是为了让你知道，用户将在他们的浏览器中打开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>

Answer 2:

尝试添加vertical-align: middle; 风格你的图片是这样的：

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

对我来说是足够多只添加这种风格。

文章来源: HTML email - white space between table rows