Outlook 中最简单的垂直分隔符是什么（HTML 电子邮件）？

Question

Outlook 中最简单的垂直 spacer 是什么（其他任何地方都支持）？

我有两个元素，一个在另一个之上，都带有 display:block。我想 space 它们不包含在 table 中。我想要一个 spacer，我可以在任何地方重复使用，只需简单地调整它的高度。我需要能够将它设置为特定的像素高度。我还需要能够使用媒体查询覆盖高度以使其响应。

<div>test1</div>
<!-- Something here with reliable/succinct height/spacing -->
<div>test2</div>

部分目标是避免每次我们需要垂直间隙时将内容拆分成 table 个单元格，因为这往往会增加其他复杂性，甚至除了代码膨胀（不利于电子邮件）。

Answer 1

对于特定应用的垫片，您可以使用：

<p>&nbsp;</p>

Outlook 非常尊重常见的 css 样式，因此您可以简单地在任何元素上使用 height 属性，或者 class 我在此示例中使用 pre 标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    pre {
      height:40px;
    }
  </style>
</head>

<body>
  <h1><%Header%></h1>

  <%Body%>
  
  <div>Line 1</div>
  <pre>&nbsp;</pre>
  <div>Line 2</div>

</body>
</html>

我会避免使用边距和填充，因为它在不同的电子邮件客户端中非常零星。

但遗憾的是，我发现在所有电子邮件客户端之间保持间距的最兼容方式仍然是表格。

Answer 2

我发现这个一致。我使用 div 和 line-height:50px;。更改 line-height predictably/consistently 会更改 MS Outlook 2016 和所有其他较新客户端上的间距量。与@Nathan 的回答相反，我没有看到省略 font-size 有任何不一致之处。我在生产中使用它，我们在 Litmus 中进行测试。如果发现问题，我会更新此答案。如果您发现问题，请告诉我。

<div style="line-height:50px;">&nbsp;</div>

我很想看到 more/better 这个问题的解决方案。我和我的团队需要一个 goto 解决方案才能成为标准。

Answer 3

如果它紧邻 table 边，最简单的方法是向 <td> 元素添加填充：

<td style="padding:20px 0;">

但是在 table 单元格中，最简单的方法是使用带边距的 <p> 元素：

<p style="margin:20px 0;">

请记住始终指定段落的顶部和底部边距，因为有默认值。我假设您已经使用了 <p>，因此在此之后它有内容。（所以，不要像另一个 post 所说的那样使用 <p> </p> - 电子邮件客户端的高度会有所不同。一些电子邮件客户端会删除所有 <style> 块，例如 Gmail IMAP。）

如果您不使用块级元素并且想要独立的东西（这很奇怪），您可以使用 <div> 并指定 line-height 和 font-size:

<div style="font-size:30px;line-height:30px;">&nbsp;</div>

为了比较，如果我们要使用 <p>，我们必须这样写，因为 <p> 有一个默认边距，你必须重新设置，所以是比 <div>:

稍微多一点

<p style="font-size:30px;line-height:30px;margin:0">&nbsp;</p>

（或 margin:30px 0 0 0;font-size:0;line-height: 0; 可以说是 'simpler'）

Answer 4

在电子邮件开发中，您总是希望使用表格来保持 cross-client 一致性。重置所有基本样式并使用 height/width 间距。

<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody style="margin: 0;padding: 0;">
        <tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
            <td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
        </tr>
</table>

Outlook 中最简单的垂直分隔符是什么（HTML 电子邮件）？

What is the simplest vertical spacer in Outlook (HTML email)?

html

css

email

outlook

html-email