HTML 电子邮件中的垂直边距屠杀
我知道 HTML 电子邮件渲染令人泪目，但这太奇怪了。
我试图在元素之间获得一致的垂直间距。我有
例如，
发送方式：
<hr style='margin:20px 0 2px 0;' />
接收方式：
<hr style='margin:2 0px 0 2px 0;' />
什么？...
发送方式：
<hr style="margin-top:20px; margin-bottom:2px;" />
已接收as:
<hr style="margin-bottom:2px;" />
来吧...
我认为内联样式是安全的，即使渲染失败，至少实际的 CSS 不会被破坏。我在这里处理什么？
（我使用标准 PHP mail() 函数从 WordPress 站点发送这些邮件）
I know HTML email rendering is a vale of tears, but this is too weird.
I'm trying to get a consistent vertical spacing between my elements. I have <hr> elements I'm using as dividers, and I'm trying to apply top/bottom margins to them. However, even though I'm applying these margins inline, the css is being mangled when I inspect it in my gmail client.
For example,
Sent as:
<hr style='margin:20px 0 2px 0;' />
Recieved as:
<hr style='margin:2 0px 0 2px 0;' />
What??...
Sent as:
<hr style="margin-top:20px; margin-bottom:2px;" />
Recieved as:
<hr style="margin-bottom:2px;" />
Come on...
I thought that in-line styles would be safe, and that even if rendering was failing, at least the actual CSS wouldn't be mangled. What am I dealing with here?
(I'm sending these out with standard PHP mail() functions out of a WordPress site)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不同的客户对保证金财产的处理方式不同。有些人完全忽略它。获得均匀垂直空间的最常见方法是对整个电子邮件使用表格布局，并使用空行表格单元格并为其设置高度以创建空间。将您的人力资源放在表格单元格中，而不为其添加边距。
另一种方法是将您的小时作为图像插入并为其设置高度。
我会选择第一种方法，因为这是在大多数受欢迎的客户中经过尝试和测试的。如果您不习惯使用表格来设置布局，则值得尝试另一种方法。
在 html 电子邮件中使用简写属性从来都不是一个好主意，因为某些客户端不支持简写属性。
Different clients handle the margin property different. Some completely ignore it. The most common way to get even vertical spaces is by using a table layout for the entire e-mail and use an empty row of table cells and set a height to them to create the spaces. Place your hr's in the tablecells without adding margins to them.
An alternative way to this is to insert you hr's as an image and setting a height to them.
I would go with the first method, because this is tried and tested among most of the popular clients. The alternative is worth trying if you're not comfortable with using tables to set up a layout.
It's never a good idea to use shorthand properties in html e-mails, because some clients don't support shorthand properties.