Question

我在电子邮件模板中有以下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>

In gmail

In outlook

如何解决这个问题？

Answer 1

不幸的是，谈到EDM，Outlook是你最大的敌人。当单元格的内容决定单元格尺寸时，某些版本不支持填充。

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

EDM不是很有趣吗？（不，他们不是。）

Answer 2

我改为跟随，它对我有用

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

Answer 3

要在电子邮件模板中创建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>

Answer 4

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

Answer 5

请改为：

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

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

Answer 6

填充在Outlook中不起作用。您可以在元素/文本之前使用多个空格（＆amp; nbsp; ）进行填充，而不是添加空白图像对于填充顶部或底部，您可以单独添加仅包含空格的div（＆amp; nbsp; ）。这将有效!!!

Answer 7

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

Answer 8

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

在这段代码中，我的目标是模拟填充：6px 12px;

有2个＆＃34; 12px表格列＆＃34;处理左右填充。

我正在使用＆＃34;填充：6px 0;＆＃34;在我的td内容上，管理顶部和底部填充：Outlook 2010和2013将忽略此并将使用自己的填充。

文本在Outlook 2010和Outlook 2013中完全一致（稍微远离顶部），但它适用于我尝试的所有其他电子邮件阅读器：Apple Mail，Gmail，Outlook 2011（是..）， Hotmail，Yahoo等等。

Preview image : Outlook 2010 and 2013 preview

Preview image : Gmail, Apple Mail and others

Answer 9

在新闻稿中避免填充和保证金，一大批电子邮件客户将无视这些内容。您可以使用其他答案中建议的空行和单元格（预防措施将空行td的行高设置为1，否则，td的行高可能高于您想要的模拟填充）

我特别找到了另一种解决方案：使用相同颜色的背景边框。我已经在gmail（以及gmail for business），yahoo mail，outlook web，outlook desktop，thunderbird，apple mail等等中测试了这个解决方案。它工作正常，它比空行和td的html少得多。

示例：

df.groupby('Invoice')['Items'].apply(', '.join).to_csv('file.csv', index=False, sep=';')

此外，这里有一个很好的指南，可以在没有媒体查询的情况下制作自适应时事通讯。您的电子邮件将始终与本指南一起使用： 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/

Answer 10

尤其要确保对Outlook使用!important。

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

我也想要边界，所以可能对没有边界的人不起作用。

Answer 11

你试过display:inline-block;吗？

Answer 12

我的解决方案是使用透明的间隔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>

Answer 13

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

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

例如：

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

Answer 14

在某些情况下，我们设置边框而不是填充，并且可以在Outlook中使用。

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

在Outlook中，css填充不起作用

14 个答案: