如何删除 HTML 电子邮件周围的所有空白？答案

【问题标题】：How can I remove all white space surrounding HTML email?如何删除 HTML 电子邮件周围的所有空白？
【发布时间】：2016-10-05 11:13:56
【问题描述】：

我有以下 html 和 css 用作生成电子邮件的模板。

但是在我的邮政程序中接收电子邮件时，我每边都有几个像素的白边。

是否可以在使用 div 时将其删除，或者是否有其他方法可以避免这些烦人的空白？

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Lack of title</title>
    <link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <style>
        body, html {
            margin: 0!important;
            padding: 0!important;
            background-color: gray;
        }

        #nav {
            height: 60px;
            width: 100%;
            background-color: #0078d7;
        }

        #content {
            width: 1160px;
            height: 800px;
            background-color: #6f6767;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div id="nav">
        {title}
    </div>
    <div id="content">
        {content}
    </div>
</body>

【问题讨论】：

您在哪个电子邮件客户端中看到了白边？ Outlook 2010、Outlook 2013、Gmail、Yahoo 等...？

标签： html css

【解决方案1】：

不同的电子邮件客户端以不同的方式呈现 HTML 电子邮件。但是您应该遵守一些基本做法（请参阅下面的参考资料）。

在查看您的代码时，您的问题很可能源于使用嵌入式样式。以下是MailChimp 对此的看法：

因为基于浏览器的电子邮件应用程序（例如 Gmail）被剥离 <head> 和 <body> 标签默认情况下，总是使用内联 CSS 而不是嵌入 CSS。

因此，head 部分中的 padding: 0 和 margin: 0 可能会被忽略或覆盖。

设计 HTML 电子邮件与设计 HTML 网站不同。电子邮件客户端和网络浏览器之间存在巨大的技术差距。好像浏览器在不断发展，但电子邮件客户端却停留在 1998 年。

在 HTML 电子邮件的世界中，嵌入式和外部样式不好，内联样式好，javascript 不好，表格布局很好。在这个世界上，老式的编码方法仍然存在并且很好。

更多信息：

【讨论】：

【解决方案2】：

由于电子邮件客户端呈现 HTML 的方式 - 并且其中许多呈现相同的 HTML 的方式不同，您最好使用表格来构建您的电子邮件。似乎所有客户端都可以识别表格。

此外，始终使用内联样式，因为内部和外部样式表可能会导致问题。这段代码似乎消除了大多数客户端的空白：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Lack of title</title>
    <link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <style>

    </style>
</head>
<body>

<div>
<table width="100%" bgcolor="#333333" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">

<table width="100%" height="60" bgcolor="#0078d7" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%" height="60">
            {nav}
        </td>
    </tr>
</table> 

</td>
</tr> 

 <tr>
 <td>

<table width="1160" height="800" bgcolor="#6f6767" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td width="1160" height="800">
            {content}
        </td>
    </tr>
</table> 

</td>
</tr>
</table>
</div>

</body>
</html>

【讨论】：