Dartek12 Dartek12 - 1 year ago 230
CSS Question

How can I remove all white space surrounding HTML email?

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.

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">
<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'>
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;
<div id="nav">
<div id="content">

Answer Source

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

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:

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

source: http://kb.mailchimp.com/campaigns/ways-to-build/css-in-html-email

So, it's very possible your padding: 0 and margin: 0 rules are being ignored by your e-mail client.

More information:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download