HTML电子邮件中的垂直边缘大屠杀

Question

我知道HTML电子邮件渲染是一种流泪，但这太奇怪了。

我试图让我的元素之间保持一致的垂直间距。我使用<hr>元素作为分隔符，并且我正在尝试将顶部/底部边距应用于它们。但是，即使我在线应用这些边距，当我在Gmail客户端中检查它时，css正在被损坏。

例如，

被当成：

<hr style='margin:20px 0 2px 0;' /> 

收到为：

<hr style='margin:2 0px 0 2px 0;' /> 

什么?? ...

被当成：

<hr style="margin-top:20px; margin-bottom:2px;" /> 

收到为：

<hr style="margin-bottom:2px;" /> 

来吧...

我认为，在联样式将是安全的，而且即使如果渲染失败，至少实际的CSS不会被破坏。我在这里处理什么？

（我用标准的PHP邮件发送这些出（）函数了WordPress网站）

Answer 1

不同的客户端处理不同margin属性。有些人完全忽略它。获得均匀垂直空间的最常见方法是对整个电子邮件使用表格布局，并使用空行的表格单元格并为其设置高度以创建空格。将你的人力资源放置在表格中，而不会为他们增加利润。

另一种方法是插入你的hr作为图像并为它们设置高度。

我会用第一种方法，因为这是在大多数受欢迎的客户端中尝试和测试。如果您不习惯使用表格来设置布局，那么值得尝试。

在html电子邮件中使用速记属性从来不是一个好主意，因为有些客户端不支持速记属性。