1

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">
<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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Dartek12
  • 172
  • 1
  • 2
  • 12

2 Answers2

3

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.

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

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.

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.

More information:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
2

Because of the way e-mail clients render HTML - and many of them render the same HTML differently, you're better off building your e-mail with tables. Tables seem to be recognised across all clients.

Also, always use inline styles as internal and external stylesheets can cause problems. This code seems to get rid of whitespace accross most clients:

<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>
Luke_W
  • 21
  • 1