如何在 Outlook 2007、2010 和 2013 的 html 电子邮件中创建填充？答案

【问题标题】：How to create padding in html email for Outlook 2007, 2010 & 2013?如何在 Outlook 2007、2010 和 2013 的 html 电子邮件中创建填充？
【发布时间】：2014-06-21 17:29:46
【问题描述】：

我的电子邮件模板（取自https://github.com/internations/antwort）在所有电子邮件客户端上都能完美运行。不幸的是，当我尝试创建一个简单的按钮时，填充在 Outlook 2007、2010 和 2013 中不起作用。

 <a style="color:white; text-decoration:none;" href="http://"><span style="color: #ffffff;     background-color:#17aadf; font-weight: bold; font-size: 14px; padding:8px;margin-left: 8px; margin-right: 8px; margin-bottom: 8px; line-height: 24px; font-family:Arial, Helvetica, sans-serif">Konto aktivieren</span></a>

即使在 Outlook 中也能看到填充（或其他），有什么好的解决方法？

【问题讨论】：

标签： html css email templates outlook

【解决方案1】：

<span> 是内联元素。他没有跨浏览器padding。尝试float:left 或删除padding 并将您的line-height 设置为32px

【讨论】：

【解决方案2】：

再添加 1 个属性 ( display:inline-block; ) 并尝试一下

【讨论】：

很遗憾没有效果
@user3589451 添加 ( !important ) 具有这样的样式属性 > ( display:inline-block !important; )

【解决方案3】：

您应该将其放入 html 电子邮件的表格中：

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" bgcolor="#17aadf" style="font-size: 14px; padding:8px; font-family:Arial, Helvetica, sans-serif;">
      <a style="color:#FFFFFE; text-decoration:none;" href="http://">Konto aktivieren</a>  
    </td>
  </tr>
</table>

<br>Or even better - no padding:<br><br>

<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle" height="35" bgcolor="#17aadf" style="font-size: 14px; font-family:Arial, Helvetica, sans-serif;">
      <a style="color:#FFFFFE; text-decoration:none;" href="http://">Konto aktivieren</a>  
    </td>
  </tr>
</table>

附带说明，您始终应该使用 6 位十六进制，并且 Gmail 不尊重纯黑色或白色超链接颜色（因此使用 #FFFFFE，而不是 #FFFFFF）

【讨论】：