HTML电子邮件开发和利润限制

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; 的所有元素设置了全局重置。解决问题。

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

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

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