html - 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

问题是应用于父 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>