如何在我的 Outlook 和 Gmail 电子邮件模板中设置相同的填充？

Question

这是一个简单的问题，我在代码中的 ul 元素中设置了 15 个像素的填充，填充在两个平台（gmail 和 outlook）中看起来完全不一样

<ul style="padding-left: 15px !important; margin: 0 !important;">
    <li
       style="text-align: left !important; font-size: 14px; font-family: Helvetica, sans-serif, sans-serif !important;">
       <span
          style="color: #055151; line-height: 150%; font-family: Helvetica, sans-serif;">
          Exemple de liste à puce</span>
    </li>
 </ul>

这是它在 gmail 中的样子：

以及它在 outlook 中的样子：

更不用说移动应用程序也有差异。

有没有办法轻松解决这个问题？我正在寻找类似 Outlook 版本的东西！

我只需要在这两个平台上兼容，不需要 yahoo 或其他东西！

任何帮助将不胜感激！！！

Answer 1

问题是每个电子邮件客户端都有不同的默认值，而且还有一些问题，例如 Outlook 如何忽略 <ul>/<ol> 中的样式。因此，我们需要重置所有元素的默认值。

此外，为了保持一致性，我们必须仅在 <li> 项中指定边距。不是填充，也不是 <ul>/<ol>.

<ul style="margin:0;padding:0;">
    <li style="margin:0 0 0 30px;padding:0;">Point 1</li>
    <li style="margin:0 0 0 30px;padding:0;">Point 2</li>
    <li style="margin:0 0 0 30px;padding:0;">Point 3</li>
</ul>

然后，对于 Outlook 桌面，我们必须修复文本缩进。在 <head> 部分添加以下内容：

<!--[if gte mso 9]>
<style>
li {
    text-indent:-1em;
}
</style>
<![endif]-->

现在，如果您想要在项目之间以及列表的顶部和底部有一些 space，您可以执行以下操作：

<ul style="margin:0;padding:0;">
    <li style="margin:20px 0 3px 30px;padding:0;">Point 1</li>
    <li style="margin:3px 0 3px 30px;padding:0;">Point 2</li>
    <li style="margin:3px 0 20px 30px;padding:0;">Point 3</li>
</ul>

这会在列表上方和下方提供 20px，在每个列表项 (3 + 3) 之间提供 6px。 30px margin 是距左边的margin。

如何在我的 Outlook 和 Gmail 电子邮件模板中设置相同的填充？

How can I set the same padding left in my template for Outlook & Gmail Emails?

css

outlook

gmail

html-email

email-templates