Outlook HTML电子邮件边距间距

Question

我们有一个wysisyg编辑器，用户可以在其中编写电子邮件内容并单击发送，因此我们需要HTML尽可能整洁。 例如：

<p><a href="">Nam velit metus</a>, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit.</p>

<p>Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque.</p>

问题是Outlook放弃了对边距/填充的支持，因此唯一的解决方法是将内容创建为：

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 20px 0; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px;  line-height: 18px;"><a href="">Nam velit metus</a>, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td style="padding: 20px 0; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px;  line-height: 18px;">Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque.</td>
</tr>
</table>

所以我的问题是，我是否最好尝试？

1. 编辑wysisyg，以便默认情况下生成表格而不是段落。 首先看一下它几乎是不可能的。

2. 或者另一个想法是在发送之前自动编辑HTML源代码，例如检查2个段落并在之间插入一个空格表，例如

     <p><a href="">Nam velit metus</a>, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum@dolor.com sit amet, consectetur adipiscing elit.</p> <!--[if mso]> <table cellpadding="0" cellspacing="0" width="100%"><tr><td height="20">&nbsp;</td></tr></table> <![endif]--> <p>Nunc pharetra luctus mi, sollicitudin ultrices lacus iaculis sed. Nam aliquam, tortor id sodales scelerisque.</p> 

我可能更喜欢这种方法，所以下一个问题是，我最好仅将此修复程序应用于Outlook，如上所示，还是将其应用于所有添加的<p style="margin:0; padding:0;"> 。

Answer 1

对于html电子邮件，所有内容都应在表格中。 话虽如此，您可以将所见即所得的内容插入到预先存在的<td> ，您应该会很好。

我知道至少有一家主要的电子邮件服务提供商在所见即所得中使用<p>标记。 尝试将其添加到您的<style>标记中：

#outlook a {padding:0;}

我个人不喜欢html中的<p>标记。 上面的样式代码可以解决问题，但是我没有费心检查，因为我发现double <br>总是更容易/更快捷。

以下是3种垂直间距的常用技术：

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td>

&nbsp;<br>      <!-- Some clients will collapse empty rows, so &nbsp; is needed -->
Content here
<br><br>
More content here
<br>&nbsp;


    </td>
  </tr>
</table>

OR

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td style="padding-top:20px; padding-bottom:20px;">

Content here
<br><br>
More content here

    </td>
  </tr>
</table>

OR

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td height="20">&nbsp;   <!-- Some clients will collapse empty rows, so &nbsp; is needed -->
    </td>
  </tr>
  <tr>
    <td>

Content here
<br><br>
More content here

    </td>
  </tr>
  <tr>
    <td height="20">&nbsp;
    </td>
  </tr>
</table>