CSS 填充在 Outlook 中不起作用答案

【问题标题】：css padding is not working in outlookCSS 填充在 Outlook 中不起作用
【发布时间】：2014-02-23 19:17:07
【问题描述】：

我在电子邮件模板中有以下 html。

我在 MS Outlook 和 gmail 中获得了不同的视图。

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

如何解决这个问题？

【问题讨论】：

首先，您可以尝试使用 *{margin: 0; 影响所有元素padding: 0;} 在你的外部样式表中。我在调试时经常这样做。然后在各个元素上本地设置边距/填充（就像您已经拥有的那样）。
对不起，如果这不相关 - 我是 HTML 新手 - 但我刚刚在保证金 <p style='margin-left:36.0pt'> 方面取得了一些成功，我在设置它后通过查看电子邮件源发现了这一点我想要的方式。
@nless 您提到的链接本身就是同一个问题。

标签： html css email outlook outlook-2010

【解决方案1】：

如果我们在line-height 之前也使用mso-line-height-rule:exactly;，我相信我们可以使用<p> 中的边距在Windows Outlook 客户端中的元素之间提供空间。

<p style="font-size:12px; mso-line-height-rule:exactly; line-height:1.00; margin:0 0 1em 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum nunc feugiat porta conseswctetur. Sedi dolor.</p>

<p style="font-size:12px; mso-line-height-rule:exactly; line-height:2.00; margin:0 0 2em 0;">Phasellus convallis, mauris ac vehicula posuere, ligula magna mattis ipsum, in sollicitudin nuddibh lacus eget sapien.</p>

<p style="font-size:12px; mso-line-height-rule:exactly; line-height:3.00; margin:0 0 4em 0;">Id semper sem pharetra vel. Sed ut erat auctor lectus pretium blandit gravida vitae enim. Nullam eget ex semeerst.</p>

Litmus Outlook 2016 (Win 7) Preview

Litmus Outlook 2019 (Win) Preview

Litmus Outlook 365 (Win)

【讨论】：

【解决方案2】：

避免简报中的填充和边距，一些电子邮件客户端会忽略此属性。

您可以按照建议使用空的tr 和td（但这会导致大量的html），或者您可以使用与电子邮件背景颜色相同的边框强>。所以，你可以用border-top: 40px solid #ffffff代替padding-top: 40px（假设邮件的背景颜色是#ffffff）

我已经在 gmail（以及商业 gmail）、yahoo mail、outlook web、outlook desktop、thunderbird、apple mail 等中测试了这个解决方案。据我所知，border 属性在任何地方都可以安全使用。

例子：


<!-- With paddings: WON'T WORK IN ALL EMAIL CLIENTS! -->
<table>

    <tr>

        <td style="padding: 10px 10px 10px 10px">
            <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result with borders and same border color of the background -->
<table>

    <tr>

        <td style="border: solid 10px #ffffff">
           <!-- Content goes here -->
        </td>

    </tr>

</table>


<!-- Same result using empty td/tr. (A lot more html than borders, get messy on large emails) -->
<table>

    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>


    <tr>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

        <td><!--Content goes here--></td>

        <td width="10" style="width: 10px; line-height: 1px">&nbsp;</td>

    </tr>


    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>

</table>
<!-- With tr/td every property is needed. height must be setted both as attribute and style, same with width, line-height must be setted JIC default value is greater than actual height and without the &nbsp; some email clients won't render the column because is empty. You can remove the colspan and still will work, but is annoying when inspecting the element in browser not to see a perfect square table -->

此外，这里是制作无需媒体查询的响应式新闻通讯的极好指南。电子邮件真的无处不在：

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

永远记得内联样式：

https://inliner.cm/

要测试电子邮件，这里有一个很好的资源：

https://putsmail.com/

最后，如果您对 电子邮件客户端中的 css 支持有疑问，您可以访问此处：

https://templates.mailchimp.com/resources/email-client-css-support/

或这里：

https://www.campaignmonitor.com/css/

【讨论】：

刚刚在 Outlook 365 (v16.0.12527) 中进行了测试，我发现将边框应用到我的 H2 样式中，如下所示： h2 {border-top:solid 100px #ffffff;确实添加了几个像素边框（可能是 8 个？），但不是我指定的 100px。我用不同的值尝试了很多次，总是相同的 ~8px 边框。
在 Outlook 中不起作用。男人的前景是 cr@p 的一部分。

【解决方案3】：

请确保特别为 Outlook 提供 !important。

td {
border-collapse: separate;
padding: 15 !important
}

我也想要边框，所以可能不适用于没有边框的人。

【讨论】：

【解决方案4】：

在某些情况下，我们设置边框而不是填充，它在 Outlook 中有效。

border: solid #efeeee;border-width: 20px 40px;

【讨论】：

这在 Outlook365 中有效，而其他似乎都没有

【解决方案5】：

不幸的是，对于 EDM (Electronic Direct Mail)，Outlook 是您最大的敌人。当单元格的内容决定单元格的尺寸时，某些版本不考虑填充。

在邮件客户端中为您提供最一致结果的方法是使用空表格单元格作为填充（我知道，这很可怕），但请记住用空白图像填充这些表格您猜对了，因为某些版本的 Outlook 不尊重空单元格的高度/宽度声明。

EDM 不好玩吗？（不。他们不是。）

【讨论】：

感谢您指向图像，这肯定会起作用。顺便说一句，对于那些正在寻找合适图像的人 - placehold.it 是一个非常好的来源，例如placeholdit.imgix.net/…
不得不抑制对这个话题投反对票的冲动，因为前景很糟糕......但答案很好，所以 +1
什么是 EDM？
顺便说一句 - 我设法通过在表中为 td 使用“% width”来解决 w/o 图像
@Craig1123 这比电子舞曲更有意义。 ;)

【解决方案6】：

我改为关注，它对我有用

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

根据 Bsalex 请求更新实际发生的变化。 我替换了 span 标签

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

table 和 td 标签如下

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

【讨论】：

请说明已更改的内容。不要强迫用户使用差异工具。
填充必须继续 <td>s 以实现跨电子邮件兼容性，而不是 <span>s。

【解决方案7】：

我遇到了同样的问题，最后我实际上使用了border 而不是padding。

【讨论】：

如果它工作会很棒 - 在 outlook.com 上没有解决
似乎适用于我的 Outlook 版本。谢谢雅各布！

【解决方案8】：

包括填充在内的所有样式都必须添加到 td 而不是跨度。

另一种解决方案将文本放入<p>text</p> 并定义边距，这应该提供所需的填充。

例如：

<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>

【讨论】：

【解决方案9】：

我的解决方案是使用带有透明间隔 gif 的空 /，因为不是 100% 支持填充。

<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">                                                                                                       
   <img width="2" border="0" src="spacer50.gif" style="display:block; 
   padding:0; margin:0; border:none;" />                                                                                                
</td>

【讨论】：

小心使用图像间隔。许多电子邮件客户端可以设置为默认阻止图像，这可能会完全破坏您的格式。一般来说，您的电子邮件应该仍然可以阅读，所有图片都替换为缺少的图片标签

【解决方案10】：

在 Litmus 中进行了许多测试后，我找不到在所有电子邮件阅读器中完美呈现的方法，但这是我找到的更好的解决方案：

<table  width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
    <tr>
        <td style="width:12px;" >&nbsp;</td>
        <td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
            <span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
        </td>
        <td style="width:12px;" >&nbsp;</td>
    </tr>
</table>

在这段代码中，我的目标是模拟 padding : 6px 12px;

有 2 个“12px 表格列”处理左右填充。

我正在使用“填充：6px 0;”在我的 td 内容上，管理顶部和底部填充：Outlook 2010 和 2013 将忽略这一点并使用它们自己的填充。

文本在 Outlook 2010 和 Outlook 2013 中不会完全对齐（离顶部有点远），但它适用于我尝试过的所有其他电子邮件阅读器：Apple Mail、Gmail、Outlook 2011（是的..）、Hotmail、雅虎等等。

Preview image : Outlook 2010 and 2013 preview

Preview image : Gmail, Apple Mail and others

【讨论】：

【解决方案11】：

只需使用
<Table cellpadding="10" ..> ... </Table>
不要在 MS-Outlook 中使用 px.Works。

【讨论】：

cellpadding on <table> 是不可靠的，就像cellspacing 一样。最好在<td>上使用填充

【解决方案12】：

填充在 Outlook 中不起作用。您可以简单地在元素/文本之前使用多个空格（）来填充左侧，而不是添加空白图像对于填充顶部或底部，您可以添加一个仅包含空格（& nbsp;）的 div。这会奏效！！！

【讨论】：

填充可以在 Outlook 上使用，前提是您遵循最佳做法 — 将所有内容嵌套在单独的 tables 和/或 td（列）中。应该有一个包含 2 个td 的表，而不是两个 span。

【解决方案13】：

改为这样做：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Order Confirmation
      </td>
      <td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Your Confirmation number is {{var order.increment_id}}
      </td>
  </tr>
</table>

最好使用两个单元格并对齐内容，而不是使用大填充和&nbsp;'s。

【讨论】：

【解决方案14】：

要在电子邮件程序/新闻通讯的电子邮件模板中创建 HTML，电子邮件客户端不支持填充/边距。您可以获取 1x1 大小的空白 gif 图像并使用它。

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

【讨论】：

实际上一些电子邮件客户端支持填充和边距
全部支持填充，部分客户端（outlook.com、Lotus Notes）不支持边距
HTML 电子邮件是如此可怕的领域，我不确定@Cthulhu 是否在这里拖钓:(
@AurSaraf 我是一名专业的电子邮件开发人员，我可以说编写电子邮件很容易。关于填充/边距 - 仅在 TD 上设置填充。永远不要使用margin 属性（可能是在手机上的媒体查询样式，但绝对不是用于桌面客户端的电子邮件代码部分）。
由于这个答案依赖于图像，当图像被阻止时会发生什么？红色 X 图标会出现在那些小图像的位置吗？

【解决方案15】：

你试过display:inline-block;吗？

【讨论】：

我需要在哪个元素中使用这个？
您放置填充的跨度，实际上两个跨度都是一个好主意。
@CarolMcKay display 在 MS Oulook 和 Gmail 中都不起作用。
这是个坏主意。使用嵌套表。