如何摆脱 outlook 中 <li> 之间的默认大 space？ HTML 电子邮件模板

Question

我在电子邮件模板中有一个无序列表。在 outlook 中，每个列表项之间有一个大得离谱的 space。我尝试了几种方法 - 在每个项目之间的 tr 和 td 中定义 space，使用大写 M 作为保证金以在 outlook 上将保证金设置为 0。

         <table>
              <tr>
                <td valign="middle" width="100%" style="text-align: center; font-family: Georgia, serif, 'Cormorant'; font-size: 16px; line-height: 22px; letter-spacing: .02em; color: #111111; font-weight: 300; font-style: italic;">
                  <ul style="list-style-position: inside; padding-left: 0; margin-left: 0; margin-bottom: 0; Margin: 0;">
                    <li style="font-style: italic; Margin: 0;">Lorem Ipsum</li>

                    <li style="font-style: italic; Margin: 0;">Lorem Ipsum</li>

                    <li style="font-style: italic Margin: 0;;" >Transport - 450m (6 min walk)</li>

                    <li style="font-style: italic; Margin: 0;"> Lorem Ipsum</li>
                  </ul>
              </td>
              </tr>
          </table>

Answer 1

我会使用 table 来获取子弹。它有点乱，但我们可以完全控制外观。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="30" align="center" valign="top" style="font-family: Helvetica, Arial, 'sans-serif';font-size:12px;padding-bottom:10px;">&bull;</td>
      <td align="left" valign="top" style="font-family: Helvetica, Arial, 'sans-serif';font-size:12px;padding-bottom:10px;">First line of bullet</td>
    </tr>
    <tr>
      <td align="center" valign="top" style="font-family: Helvetica, Arial, 'sans-serif';font-size:12px;padding-bottom:10px;">&bull;</td>
      <td align="left" valign="top" style="font-family: Helvetica, Arial, 'sans-serif';font-size:12px;padding-bottom:10px;">Second line of bullet</td>
    </tr>
  </tbody>
</table>

table 设置为 100%，因此放置时它将占据父 td 的宽度。让我知道这是否适合您。

如何摆脱 outlook 中 <li> 之间的默认大 space？ HTML 电子邮件模板

How can I get rid of the default large space between <li> in outlook? HTML Email Template

html

email

outlook

email-templates