Outlook 2010 中行之间的额外间距

Question

我在 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>

Answer 1

问题在于应用于父级

margin-bottom

的

table

样式。 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>

Answer 2

“删除下边距”对我不起作用。我最终添加了一个空白行作为最后一行，如下所示：

<tr>
   <td style="height:0;font-size:0;">&nbsp;</td>
</tr>