如何在适用于 Outlook 和 Gmail 电子邮件的模板中设置留白？

Question

我在列表元素的代码中设置了 15 个像素的左边填充，显示的填充在两个平台上看起来不一样。

<ul style="padding-left: 10px !important; margin: 0 !important;">
    <li
       style="text-align: left !important; font-size: 14px; font-family: bold, sans-serif, sans-serif !important;">
       <span
          style="color: #055151; line-height: 150%; font-family: bold, sans-serif;">List element</span>
    </li>
 </ul>

如何实现？

Answer 1

Windows 上的 Outlooks 使用 Word 作为 HTML 和 CSS 的渲染引擎。我在这里看到两件事可能有问题：

不支持内联 !important 样式。
Word 使用 text-indent 来实际定位列表项标记。为了避免影响其他电子邮件客户端，我们可以使用 mso-text-indent-alt 将专门应用于 Outlook 使用 Word 的呈现引擎。

这是一个示例代码，应该符合您想要实现的目标：

<ul style="padding:0; margin:0 0 0 10px;">
    <li style="mso-text-indent-alt:-0.75em; text-align:left; font:bold 14px sans-serif;">
        <span style="color:#055151; line-height:150%;">List element</span>
    </li>
</ul>

这里是 test screenshots on Email on Acid。

如何在适用于 Outlook 和 Gmail 电子邮件的模板中设置留白？

How can I set padding left in my template that works both for Outlook & Gmail Emails?

css

email

html-email