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

【问题标题】：How can I set the same padding left in my template for Outlook & Gmail Emails?如何在 Outlook 和 Gmail 电子邮件的模板中设置相同的填充？
【发布时间】：2021-02-15 19:33:48
【问题描述】：

这是一个简单的问题，我在 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 版本的内容！

我只需要在这两个平台上的兼容性，不需要雅虎或其他！

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

【问题讨论】：

我通常使用表格来获取项目符号。代码会增加，但您可以完全控制外观。尝试将ul 重置为0px，将间距/填充放在li 上，看看是否有区别。将li 填充和边距清零，然后设置您自己的。

标签： css outlook gmail html-email email-templates

【解决方案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]-->

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

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

这给出了列表上方和下方 20 像素，以及每个列表项之间的 6 像素 (3 + 3)。 30px 边距是距左边的边距。

【讨论】：

因为你刚才说的，每个平台都有自己的默认渲染，我移到tables解决方案，我用tr & td创建了一个列表，谢谢你的帮助先生！
好吧，不需要使用表格——通过自己设置边距和填充来覆盖默认值，如图所示。所以对我来说，我仍然在电子邮件中使用普通列表，而且效果很好。
这是真的，它有效！但在这种情况下，我更喜欢没有条件的代码
这是@Nathan。将列表表示为列表可以使其“自动”响应，至少在大多数设备中是这样。