HTML电子邮件开发和margin-block答案

【问题标题】：HTML Email Development and margin-blockHTML电子邮件开发和margin-block
【发布时间】：2020-01-28 03:13:38
【问题描述】：

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

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 的值。

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

【问题讨论】：

标签： email gmail outlook.com

【解决方案1】：

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

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

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

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

【讨论】：