如何删除 HTML 电子邮件两侧的白边？答案

【问题标题】：How do I remove the white margins along the sides of my HTML email?如何删除 HTML 电子邮件两侧的白边？
【发布时间】：2013-06-23 03:26:35
【问题描述】：

这是我现在遇到的问题。我的 HTML 电子邮件的左侧和右侧有这些边距，如在 Mac 邮件中所示（在 Gmail 和 Thunderbird 中也可见）：http://cl.ly/image/3j133f393Y3M/Screen%20Shot%202013-06-26%20at%201.22.04%20AM.png

我的目标是像这样的全角背景：http://cl.ly/image/1205093I1m34/Screen%20Shot%202013-06-26%20at%201.22.47%20AM.png

根据代码，我的背景宽度似乎已经设置为 100%：

<html>
       <title>AASU VCU</title>
       <body style="margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: Helvetica, Arial, san-serif; background-color:#fff" bgcolor="#000">
       </body>

    <table bgcolor="#b2151b" style="color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:26px;width:100%;margin:0;padding:0">
    <table cellpadding="0" cellspacing="0" width="100%" bgcolor="#b2151b" style="padding:0 40px; color:#fff"; font-family="Helvetica,Arial,san-serif"; font-size:"16px"; line-height="25px"; table-layout="fixed">

    <tbody>
       <tr>
          <td bgcolor="#b2151b" width="450" style="color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:26px">
          <br>
          <br>
    <table cellpadding="0" cellspacing="0" width="450" bgcolor="#b2151b" border="0" rules="none" frame="border" align="center" style="color:#fff; font-family:Helvetica,Arial,sans-serif; font-size:16px;line-height:26px; border-width:0px 0px 0px 0px; background-color:#b2151b" >

    <tbody>
       <tr>
          <td width="450" valign="top" bgcolor="#b2151b" style="color:#a7abb1;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:26px">
    <a style="border:none!important;color:#ffffff;text-decoration:none;border-bottom:1px solid #666"><img src="http://f.cl.ly/items/3M3W1U0W1o1P1s3u1Q0C/White_transparent.png" alt="AASU VCU" style="border:none"></a> 
        </td>
        </tr>
        </tbody>
        </table>

我在浏览器中测试了代码，无论我调整多少或更少，背景似乎都能成功拉伸到全宽。我只在邮件客户端中看到这些边距。我错过了什么？

【问题讨论】：

你能发布更多你的 html 标记吗？仅 2 个表头不足以解决您的问题。
快速而肮脏的方法是在你的样式表中使用* { margin: 0; padding: 0 }。它将所有元素的所有边距和填充设置为零。
@LinkinTED - 这是 HTML 电子邮件，所以我不认为我想使用 CSS。尽管我确实将正文样式更改为“边距：0；填充：0”。什么都不做。
为什么不使用 CSS，它是允许的，甚至比使用 bgcolor 更好...而且您已经使用带有 style="" 属性的内联 CSS。试试在<html>下面添加这个：<head> <style type="text/css"> * { margin: 0; padding: 0; } </style> <title>AASA VCU</title> </head>
@LinkinTED - 成功了！我使用内联 CSS 并设置“margin：0”和“padding：0 auto”。非常感谢！

标签： html email padding html-email margins

【解决方案1】：

我建议在第一个表格元素中包含“border:0px”属性。我的经验法则是，当我没有为它们设置值时，我将边距、填充和边框设置为 0px。

祝你好运。

【讨论】：

【解决方案2】：

另外，您的</body> 结束标记就在<body> 标记下方。这也可能是个问题。

【讨论】：