logo标签列表

HTML邮件中的间距问题

htmlcssemailhtml-email
6
我正在设计一个小应用程序，可以通过电子邮件发送6种带有常见内容的设计模板之一。
在维护文本间距和布局方面，最好（最一致）的方法是什么？
我们考虑使用简单的<br>，但与其他东西相比，我们可能会失去一些灵活性。这是基于表格的布局。
干杯
如果您使用段落并设置line-height、padding和margin样式，那么这将使您对行间距有更好的控制。 - Steven Ryssaert
4个回答
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>
3
1
谢谢您通知我这件事。我已经查找并更新了链接。为了防止将来链接再次失效，我在此留下文章的标题。 - rafaelbiten
2

雅虎邮箱（以及可能其他电子邮件客户端）对<p>的解释与大多数其他客户端不同——很难在雅虎中使<p>看起来正确，而不会使它在其他所有客户端中看起来错误。根据我的经验，您可以通过使用<br />、行高和字体大小来更好地控制间距/格式。您可以给一个<br />标签添加内联样式line-height来更具体地调整间距。

然而：

  • Outlook 2007/2010倾向于忽略line-height属性。
  • 所有电子邮件客户端都使用和/或忽略margin样式。在可能的情况下使用padding而不是margin会更加可靠。

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

1
今天最好的方法是每行使用一个p元素，并使用CSS进行样式设置。
您应该考虑使用div和CSS样式替换大多数基于表格的布局（除非您需要具有相同高度的水平元素）。
如果您能提出一个具体的问题，比如：“我如何使用HTML实现这个<insert image here>？”，那么我的答案会更好。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接