我有以下 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: 0
和 margin: 0
在你的head
部分可能被忽略或覆盖。
设计 HTML 电子邮件不同于设计 HTML 网站。电子邮件客户端和网络浏览器之间存在巨大的技术差距。就好像浏览器在不断发展,但电子邮件客户端却停滞在 1998 年。
在 HTML 电子邮件的世界中,嵌入式和外部样式不好,内联样式很好,javascript 不好,用于布局的表格很好。在这个世界上,老派的编码方法依然存在。
更多信息:
关于html - 如何删除 HTML 电子邮件周围的所有空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37647378/