Css 填充在 Outlook 中不起作用

小开

你试过 display:inline-block;吗？

小开

不幸的是，当涉及到 EDM (电子直邮)时，Outlook 是您最大的敌人。当单元格的内容决定单元格的尺寸时，有些版本不考虑填充。

为邮件客户端提供最多 始终如一结果的方法是使用空表单元格作为填充(我知道，这很恐怖) ，但是请记住用所需尺寸的空白图像填充这些表格，因为你猜到了，某些版本的 Outlook 不尊重空单元格的高度/宽度声明。

电火花机不好玩吗? (不，它们不好玩。)

小开

要在电子邮件模板(即电子邮件/新闻通讯)中创建 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>

小开

不如这样做:

<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>

使用两个单元格并对齐内容比使用大填充和  更好。

小开

最佳答案

我改成了跟随，这对我很有效

<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 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>

小开

在 Outlook 中无法使用填充。您可以简单地在元素/文本之前使用多个空格(& nbsp;)来填充左侧，而不是添加空白 Image 为了填充顶部或底部，您可以添加一个只包含空格(& nbsp;)的 div。会成功的! ! ！

小开

用就是了
< Table cellpads = “10”. . > ...
不要在 MS-Outlook 中使用 px。

小开

在 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>

在这段代码中，我的目标是模拟 填充: 6像素12像素;

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

我在我的 td 内容中使用“ pding: 6px 0;”来管理顶部和底部的填充: Outlook2010和2013将忽略这一点，并使用自己的填充。

在 Outlook2010和 Outlook2013中，文本不会完全对齐(离顶部稍微有点远) ，但它可以与我试过的所有其他电子邮件阅读器一起工作: Apple Mail，Gmail，Outlook2011(是的。.)Hotmail、雅虎等等。

预览图像: Outlook2010和2013预览

预览图片: Gmail，Apple Mail 等

小开

我的解决方案是使用一个空的/任何需要透明间隔 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>

小开

所有样式包括填充都必须添加到 td 而不是 span。

另一个解决方案是将文本放入 <p>text</p>并定义边距，这样应该可以得到所需的填充。

例如:

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

小开

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

小开

避免在通讯 中使用填充和页边距，一些电子邮件客户端会忽略这些属性。

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

我已经在 gmail (以及商用 gmail)、雅虎邮箱、 Outlook web、 Outlook 桌面、雷鸟、苹果邮箱等多个应用中测试过这个解决方案。据我所知，边境财产在任何地方使用都很安全。

例如:


<!-- 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 (assuming a white background-color) -->
<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 using borders, 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 because the default value may be greater than the wanted height.
- The "&nbsp;" is there because some email clients won't render empty columns.
- You can remove the "colspan" and still will work, but is cleaner, especially when inspecting the element in the browser's console.
-->

此外，这里有一个很好的指南，使 没有媒体咨询的反应灵敏的通讯。电子邮件真的无处不在:

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

一定要记住使用 使样式内联。这一点很重要，因为一些电子邮件客户端 不支持的 <style>标签:

Https://inliner.cm/

对于 测试电邮来说，这是一个很好的资源:

Https://putsmail.com/

最后，如果你对 电子邮件客户端的 css 支持有疑问，可以点击这里:

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

或者这里:

Https://www.campaignmonitor.com/css/

编辑:

对于 Outlook 中使用边框的问题，您可以尝试将这个代码片段添加到邮件头 (Outlook 支持 <head>标签) :

<head>
<!--[if mso]>
<style type="text/css">
table {border-collapse:collapse; border-spacing:0; margin:0}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<![endif]-->
</head>

Outlook 假定表单元格的边框不应重叠，除非在表样式中使用 border-collapse:collapse。

小开

在某些情况下，我们设置的边界，而不是填充和它的工程展望。

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

小开

确保为 Outlook 特别打开 !important。

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

我也想要边界，所以可能不适合那些没有边界的人。

小开

我相信，如果我们在 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)预览

Litmus Outlook 2019(Win)预览

Litmus Outlook 365(Win)