HTML 电子邮件中的间距答案

【问题标题】：Spacing in HTML emailsHTML 电子邮件中的间距
【发布时间】：2011-08-27 06:54:32
【问题描述】：

我正在设计一个小应用程序，它可以通过电子邮件发送 6 个具有共同内容的设计模板之一。

保持文本空间和布局（行间等）的最佳（最一致）方法是什么

我们曾考虑使用简单的 ，但与其他东西相比，我们可能会失去一些灵活性。这是一个基于表格的布局

干杯

【问题讨论】：

如果您使用段落并设置line-height 和padding、margin 样式，那么您应该可以控制行间距。

标签： html css email html-email

【解决方案1】：

帮自己一个忙，花点时间阅读来自 Acid 电子邮件的文章 7 Tips Regarding Margins and HTML Padding in Emails。

这将有很大帮助！而且我是认真的...

【讨论】：

感谢您通知我。我查找并更新了链接。我还将在此处留下文章的标题，以防将来链接再次断开。

【解决方案2】：

Yahoo（可能还有其他电子邮件客户端）对 的解释与大多数其他人不同——很难使 在Yahoo 中看起来正确而在所有其他人中看起来都是错误的。根据我的经验，您可以通过使用  以及行高以及字体大小来更好地控制间距/格式。您可以为   标记提供内联 line-height 样式以更具体地调整间距。

但是：

Outlook 2007/2010 倾向于忽略 line-height 属性。
margin 样式被所有电子邮件客户端以不同的方式使用和/或忽略。尽可能使用padding 而不是margin 更可靠。

HTML-for-email 中可用的最佳间距和布局控制（如您所知，仅限于基于表格的布局和内联样式）是将文本的行/段落分隔到不同的表格单元格/行中，并控制与 <td> 元素的 width 和 height 间距。使用这种方法，您几乎总是会拥有style="border:0; margin:0; padding:0;"

【讨论】：

【解决方案3】：

您应该在电子邮件标记中使用内联样式。

这是一个示例，说明如何在您的电子邮件构建中一致地分隔段落

<p style="margin:0 0 15px 0;padding:0;line-height:value;font-size:value">Insert Paragraph information here</p>
<p style="margin:0 0 15px 0;padding:0;line-height:value;font-size:value">Insert Paragraph information here</p>

【讨论】：

【解决方案4】：

今天最好的方法是每行使用一个 p 元素并使用 CSS 设置样式。

您应该考虑将大部分基于表格的布局替换为divs 和 CSS 样式（显然，除非您需要具有相同高度的水平元素）。

如果你能陈述一个特定的问题，我的回答会更好：“我怎样才能用 HTML 实现这个<insert image here>？”

【讨论】：