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>