Question

我知道这是一个常见的问题，我搜索过高低的解决方案。我遇到过的一切，我都试过了。如果我留下任何头发，我会把它拉出来。

我有一张表有一系列要点。这个表的问题是每当我创建一个新行时，Outlook决定在每行下面添加额外的间距，使我的表看起来比它应该更大。

<style type="text/css">
  .ExternalClass table, .ExternalClass tr, .ExternalClass td {line-height: 100%;}
</style>

<table width="400" align="left" cellpadding="0" cellspacing="0" border="0">
  <tr style="margin:0px; padding:0px;">
    <td width="10" align="right" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      &bull;
      </p>
    </td>
    <td width="380" align="left" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      Info next to bullet
      </p>
    </td>
  </tr>
  <tr style="margin:0px; padding:0px;">
    <td width="10" align="right" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      &bull;
      </p>
    </td>
    <td width="380" align="left" valign="top" style="border:none; margin:0px; padding:0px;">
      <p style="margin:0px; padding:0px;">
      Info next to bullet
      </p>
    </td>
  </tr>
</table>

我尝试过的东西不起作用：

border-collapse:collapse

display:block

display:inline-block

float:left

Answer 1

删除标签，邮件客户端并不总是尊重这些标签，他们会在之后自动添加额外的换行符。

如果需要，您可以将替换为，因为没有任何“免费”填充。

Answer 2

Outlook.com添加了覆盖行高的嵌入式CSS，并且Outlook和Outlook.com都不能很好地支持页边距，如果有的话：我找到了标记提示在线论坛（我认为是Campaign Monitor），但我永远无法让它始终如一地运作：

HTML /内联CSS：

<p style="margin-bottom:0;margin:0 0 1em;padding:0;">some text here</p>

执行此操作以解决问题

要覆盖Outlook.com行高，请执行以下操作：

嵌入式CSS：

.ExternalClass * { line-height:105%; }

为了在所有电子邮件客户端/用户代理中保持一致的填充/边距，我使用标记和填充（无边距属性）到<td>容器：

HTML /内联CSS

<td class="classname" style="padding-bottom: 3px; font-family: Arial, sans-serif; font-size: 13px; mso-line-height-rule: exactly; line-height: 15px;">
  Text Goes Here
</td>

注意：我为样式添加了一个类名，以支持响应式设计。

注意：我在Outlook 2003/2007/2010/2013中找到了mso-line-height-rule: exactly。它仅在块级元素上使用时才有效，并且必须在line-height之前列为第一个属性（如上例所示）。

一般提示：

如果可能，将所有内联样式添加到块级标记。
将标题和后面的相关内容放在单独的表行中，这样我就可以在标题的包含<td>中添加填充。它可能有点过分，但它比你发现的任何东西都更能控制间距。

HTML /内联CSS：

<tr>
  <td class="introHead" style="padding-bottom:3px;color:#000000;font-family:Arial;font-size:16px;">
    Heading goes here
  </td>
</tr>
<tr>
  <td class="introCopy" style="color:#000000;font-family:Arial;font-size:16px;">
    This is the body of the text, Lorem Ipsum yadda yadda.
  </td>
</tr>

Outlook在HTML电子邮件中添加空间

2 个答案: