HTML 电子邮件中段落和表格之间的多余间距答案

【问题标题】：Extraneous spacing between paragraph and table in HTML EmailHTML 电子邮件中段落和表格之间的多余间距
【发布时间】：2016-03-08 19:15:23
【问题描述】：

我有一个段落标签，后跟一个表格。

<p style="font:100 15px/23px Arial;margin:8px 0;padding:0;color:#4d4e53;">TEXT</p>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;color:#4d4e53;margin:0;padding:0;">
  <tr>
    <td style="vertical-align:top;padding:8px 0;font:700 15px/23px">TEXT</td>
  </tr>
</table>

除了 Outlook 2007、2010 和 2013 版本之外，这看起来与我在几十个场景中的预期完全一样（16px 的间距，8 个来自段落的边距和 8 个来自表格单元格的填充）。

这是一个非常大的差异。这是 Outlook 中段落和表格之间的间距：

不确定这是否有帮助，但是当用光标突出显示时，它看起来像这样，表明这是段落的间距问题。我有几个堆叠的段落，他们没有这个问题。

有人看过这个或者有什么建议吗？

试过

这绝不是一个完整的列表......

为表格添加特定于 mso 的样式：

mso-margin-top-alt:0px; mso-margin-bottom-alt:0px; mso-padding-alt: 0px 0px 0px 0px;

将所有padding:0; 拆分为padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;

删除 p 和 table 标记之间的空格（换行符）。

第二轮

将所有 p 标签替换为 div

“边距”（大写 M）技巧，然后将所有 4 个边距分开。

还有 mso 特定的 css：

mso-table-lspace:0pt;mso-table-rspace:0pt;

【问题讨论】：

能否附上您的电子邮件的完整代码？
@GeoffPhillips 唉，我不能。但是我确实想通了，请参阅答案:)

标签： html css outlook html-email

【解决方案1】：

看起来 Outlook 不能很好地处理位于非块元素旁边的块元素（这是我的猜测，无论如何）。

解决方案是将前面的段落包装在一个 div 中，如下所示：

<div>
  <p style="font:100 15px/23px Arial;margin:8px 0;padding:0;color:#4d4e53;">TEXT</p>
</div>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse;color:#4d4e53;margin:0;padding:0;">
  <tr>
    <td style="vertical-align:top;padding:8px 0;font:700 15px/23px">TEXT</td>
  </tr>
</table>

【讨论】：