时间戳

首页 > 解决方案 > HTML电子邮件开发和margin-block

email - HTML电子邮件开发和margin-block

问题描述

我有一个有趣的问题，我似乎无法弄清楚。

Chrome 和 FireFox 正在添加默认样式，margin-block-start:1em; margin-block-end:1em;而 Safari 正在添加margin-before:1em; margin-after:1em;段落和标题元素。这导致段落之间以及标题及其相关副本之间的空间超出预期。

我可以添加一个用于直接在浏览器中查看 HTML 的重置。但是这个重置并没有在 Outlook.com、Office 365 和 Gmail 上实现。这些网络邮件客户端似乎不支持这些 CSS 属性，并且正在将它们过滤掉。

这是我迄今为止尝试使用的：

p, h1, h2, h3, h3, h4, h4 {
   margin-block-start:0px;
   margin-block-end:0px;
   margin-inline-start:0px;
   margin-inline-end:0px;
   -webkit-margin-before:0px;
   -webkit-margin-after:0px;
   margin-before:0px;
   margin-after:0px;
}

此 CSS 样式未将其放入电子邮件客户端的样式标记中。例如，Outlook.com 将括号显示为空且其中没有任何属性。因此，没有发生全局重置，浏览器正在应用 1em 的值。

有没有人找到解决这个问题的方法？设置边距和填充属性似乎不会覆盖边距块。

标签： emailgmailoutlook.com

解决方案

看起来像是为 margin:0; 的所有元素设置全局重置；解决了这个问题。

如果您只说定义内联或全局边距，或者在 Chrome、Firefox 和 Safari 类中定义所有边距，则开始添加 webmail 客户端不支持的边距块，因此您无法直接重置它。

将此重置添加到 HTML 文档头部的样式标记应该可以解决添加的任何边距块边距。

p, h1, h2, h3, h3, h4, h5 {
	Margin:0;
}

推荐阅读