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

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

我对编写HTML电子邮件相当陌生，需要帮助排除故障-有人能告诉我需要在代码中更改哪些内容来解决此问题吗

这是我的测试页面：

下面是一个屏幕帽，显示Outlook中的问题：

这些客户受到影响：

Outlook 2007
Outlook 2010
2013年展望
Gmail（Android）
Gmail（浏览器）
Gmail（Chrome）

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

您需要在图像上使用

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>

内容在这里。。。

您需要在图像上显示

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>

内容在这里。。。

尝试添加

垂直对齐：中间为图像设置样式，例如：

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



对我来说，只添加这种样式已经足够了。
尝试添加
垂直对齐：中间为图像设置样式，例如：

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



对我来说，仅仅增加这种风格就足够了