如何删除HTML电子邮件周围的所有空白? [英] How can I remove all white space surrounding HTML email?

查看:139
本文介绍了如何删除HTML电子邮件周围的所有空白?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've got the following html and css to be used as a template for generating e-mail messages.

但是,在我的邮政程序中接收电子邮件时,我的每面都留有一些白色的空白边缘.

But when it comes to receiving the e-mail on my postal programme I have a few pixels of white margins every side.

是否可以在使用div时将其删除,或者还有另一种方法来避免这些烦人的空格?

Is it possible to remove it while using divs or is there another way to avoid these annoying white spaces?

<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电子邮件.但是,您应该遵循一些基本做法(请参见下面的参考资料).

Different e-mail clients render HTML e-mails differently. But there are a few basic practices you should adhere to (see references below).

在查看代码时,很有可能是由于使用嵌入式样式而引起的问题.这是 MailChimp 所说的:

In looking at your code, there's a good chance your problem stems from the use of embedded styles. Here's what MailChimp has to say about that:

因为基于浏览器的电子邮件应用程序(例如Gmail)被剔除 默认情况下,<head><body>标记始终在嵌入式上使用内联CSS CSS.

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

因此,您的head部分中的padding: 0margin: 0可能会被忽略或覆盖.

So, the padding: 0 and margin: 0 in your head section are possibly being ignored or overridden.

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

Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.

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

In the world of HTML e-mail, embedded and external styles are bad, inline styles are good, javascript is bad, tables for layout are good. In this world, old-school coding methods are alive and well.

更多信息:

  • CSS in HTML Email
  • Best practices for styling HTML emails
  • Best Practices & Considerations when writing HTML Emails

这篇关于如何删除HTML电子邮件周围的所有空白?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆