Question

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

但是当我在邮政程序上接收电子邮件时，我的每一面都有一些白色边缘像素。

是否可以在使用div时删除它，还是有其他方法可以避免这些烦人的空格？

＆＃13;

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

＆＃13;

Answer 1

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

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

因为基于浏览器的电子邮件应用程序（如Gmail）会脱机默认情况下，<head>和<body>标记始终使用嵌入式内嵌CSS CSS。

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

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

在HTML电子邮件世界中，嵌入式和外部样式都很糟糕，内联样式很好，javascript很糟糕，布局表很好。在这个世界上，老派的编码方法还很活跃。

更多信息：

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

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

2 个答案: