Outlook 2010 中的行之间的额外间距答案

【问题标题】：Extra Spacing Between Rows in Outlook 2010Outlook 2010 中的行之间的额外间距
【发布时间】：2018-01-29 21:41:55
【问题描述】：

我正在使用表格来伪造我的 HTML 电子邮件中的项目符号列表。除了 Outlook 2010 之外，它在所有客户端中看起来都很棒，它在每行之间添加了额外的空白：

表 cellpadding 和 cellspacing 设置为 0，我尝试在每个表行中显式设置 line-height。

代码：

<table width="100%" style="table-layout: fixed; margin-bottom: 21px; border: none;" cellpadding="0" cellspacing="0">
  <tr>
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td>
    <td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
  </tr>
  <tr>
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td>
    <td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
  </tr>
  <tr>
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td>
    <td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
  </tr>
</table>

【问题讨论】：

标签： html css outlook html-email outlook-2010

【解决方案1】：

问题是应用于父table 的margin-bottom 样式。 Outlook 将该样式应用于子元素，因此每个 td 的下边距为 21px。删除底部边距并使用空白表格行来代替底部边距：

<table width="100%" class="list-table" style="table-layout: fixed; border: none;" cellpadding="0" cellspacing="0">
  <tr>
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td>
    <td width="485" valign="top" style="border-collapse: collapse;">Satisfy the PSD2 requirement for Strong Customer Authentication (SCA)</td>
  </tr>
  <tr>
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td>
    <td width="485" valign="top" style="border-collapse: collapse;">Help you comply with GDPR and minimize the risk of potential penalties</td>
  </tr>
  <tr>
    <td width="15" valign="top" style="border-collapse: collapse;">&bull;</td>
    <td width="485" valign="top" style="border-collapse: collapse;">Reduce friction to improve your user experience</td>
  </tr>
  <tr>
    <td width="100%" height="21" colspan="2" style="border-collapse: collapse;">&nbsp;</td>
  </tr>
</table>

【讨论】：

嗯，还没有听说过 Outlook 这样做，但很高兴知道。希望在 Outlooks 中复制此内容。所有 Outlooks 都在这样做还是 2007+ ？
这正是发生在我身上的事情——感谢您指出这一点。删除父表上的填充也删除了该表行之间的奇怪间距。