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

标签 html css

我有以下 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>

最佳答案

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

在查看您的代码时,您的问题很可能源于使用嵌入式样式。这是MailChimp不得不说:

Because browser-based email applications, such as Gmail, strip out <head> and <body> tags by default, always use inline CSS over embedded CSS.

因此,padding: 0margin: 0在你的head部分可能被忽略或覆盖。

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

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

更多信息:

关于html - 如何删除 HTML 电子邮件周围的所有空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37647378/

相关文章:

javascript - 脚本在 chrome 中有效,但在 firefox 中无效

css - 需要简单的 html5 布局帮助的相等人造列

javascript - 如何将 "glue"元素调整大小的图像?

html - 在 CSS 中生成对 Angular 线(条纹)

css - Webpack:有没有办法在处理之前替换导入的文件路径?

html - 如果图像是矩形,文本对齐中心在 Windows Phone 上不起作用

javascript - 滚动时元素转到错误的位置

html - 具有两个不同跨度的流体行上的多个 div

html - 水平对齐 3 个 div,没有边距,仅在 chrome 中存在错误

php - 使用远程图像和样式表将 PHP HTML 内容转换为 DOC/PDF