email - HTML 电子邮件开发和边距 block

Question

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

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

我可以添加一个重置，用于直接在浏览器中查看 HTML。但是这种重置并没有在 Outlook.com、Office 365 和 Gmail 上实现。看起来这些 webmail 客户端不支持这些 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 的值。

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

Answer 1

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

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

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

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