Skip to content Skip to sidebar Skip to footer
Home / Css / Html

How Can I Remove All White Space Surrounding Html Email?

Post a Comment
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

Solution 1:

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:

Solution 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:

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8" /><title>Lack of title</title><linkhref='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext'rel='stylesheet'type='text/css'><style></style></head><body><div><tablewidth="100%"bgcolor="#333333"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="100%"><tablewidth="100%"height="60"bgcolor="#0078d7"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="100%"height="60">
            {nav}
        </td></tr></table></td></tr><tr><td><tablewidth="1160"height="800"bgcolor="#6f6767"border="0"cellspacing="0"cellpadding="0"align="center"><tr><tdwidth="1160"height="800">
            {content}
        </td></tr></table></td></tr></table></div></body></html>

Post a Comment for "How Can I Remove All White Space Surrounding Html Email?"