我在电子邮件模板中有以下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>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>
如何解决这个问题？
不幸的是，当谈到EDM时，Outlook是你最大的敌人。当单元格的内容决定单元格尺寸时，某些版本不支持填充。
在邮件客户端中为您提供最一致结果的方法是使用空表格单元格作为填充（我知道，恐怖），但请记住用所需尺寸的空白图像填充这些表格，因为您猜对了，某些版本的Outlook不尊重空单元格的高度/宽度声明。
EDM不是很有趣吗？ （不，他们不是。）
你试过display:inline-block;吗？
我的解决方案是使用透明的间隔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而不是跨度。
另一种解决方案是将文本放入<p>text</p>并定义边距，这应该提供所需的填充。
例如：
<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>
我改为跟随，它对我有用
<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>
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>
表和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>
要在电子邮件模板（即电子邮件/简报）中创建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 cellpadding="10" ..>
...
</Table>
不要在MS-Outlook中使用px.Works。
改为：
<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>
最好使用两个单元格并对齐内容，而不是使用大填充和 。
填充在Outlook中不起作用。您可以在元素/文本之前使用多个空格（＆nbsp;）进行填充，而不是添加空白图像。对于填充顶部或底部，您可以添加仅包含空格（仅限空格）的div。这会工作!!!
我有同样的问题，最终实际上使用border而不是padding。
在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;" > </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;" > </td>
</tr>
</table>
在这段代码中，我的目标是模拟填充：6px 12px;
有2个“12px表列”处理右侧和左侧填充。
我正在使用“填充：6px 0;”在我的td内容上，管理顶部和底部填充：Outlook 2010和2013将忽略此并将使用自己的填充。
Outlook 2010和Outlook 2013中的文本不完全一致（距离顶部稍远）但它适用于我尝试的所有其他电子邮件阅读器：Apple Mail，Gmail，Outlook 2011（是..），Hotmail，Yahoo和许多更多。
在新闻稿中避免填充和保证金，电子邮件客户端的数量将会很大。您可以使用其他答案中建议的空行和单元格（预防措施将空行td的行高设置为1，否则，td的行高可能高于您想要的模拟填充） 。
我特别找到了另一种解决方案：使用相同颜色的背景边框。我已经在gmail（以及gmail for business），yahoo mail，outlook web，outlook desktop，thunderbird，apple mail等等中测试了这个解决方案。它工作正常，它比空行和td少得多。
例：
<!-- With paddings: WON'T WORK IN ALL EMAIL CLIENTS! -->
<table>
<tr>
<!--use paddings-->
<td style="padding: 10px 10px 10px 10px">
<!--Content goes here-->
</td>
</tr>
</table>
<!-- Same result with borders. Same color of your background -->
<table>
<tr>
<!--use border same color of bg-->
<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"> </td>
</tr>
<tr>
<td width="10" style="width: 10px; line-height: 1px"> </td>
<td>
<!--Content goes here-->
</td>
<td width="10" style="width: 10px; line-height: 1px"> </td>
</tr>
<tr>
<td colspan="3" height="10" style="height: 10px; line-height: 1px"> </td>
</tr>
</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/