HTML emails in 2013: How to control spacing between elements like paragraphs and images?

Question

I am currently redesigning some HTML email templates, which is something I haven't done for a couple of years in this much depth.

I've made my template in an HTML file which I'm testing locally in the browser, and it all looks fine.

I'm using tables for layout
The only other tags I'm using are <p> <a> and <img>
The CSS is in a <style> tag after the opening <body> tag for now but I am converting it to inline styles before sending, using MailChimp's CSS Inliner Tool. I just put it in a style tag for you to see the CSS easier here. It makes no difference in a lot of clients anyway, for testing purposes.

Now that I'm sending test emails from my PHP application, I'm trying to get them to come through to the email client(s) looking the same as my mockup.

The main thing I notice is that the margin/padding styles seem to be either ignored (e.g. Outlook 2007) or extra padding/margin is added on things like <td> which makes everything way more padded than I told it to be (e.g. Hotmail).

Example Source

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<body>

<style type="text/css">
    td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;}
    a {color:#056DA5;}
    p {margin:0; padding:6px 0 6px 0;}
    .tel {font-weight:bold; color:#056DA5;}
    #wrapper {padding:10px;}
    #signoff {padding:18px 0;}
    #signoff #questions {padding-bottom:18px;}
    #signature {padding-top:20px; border-top:1px solid #EEE;}
    #signature td {font-size:12px; color:#777;}
    #signature #logo {padding-bottom:12px;}
    #signature #contact p {padding:3px 0 3px 0;}
    #signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;}
    #signature #contact .tel {padding-top:6px; color:#777;}
    #signature #social {padding:20px 0 20px 0;}
    #signature #social a {margin-right:8px;}
    #signature #address {font-size:11px; color:#999;}
</style>

<table id="wrapper" width="100%" bgcolor="#FFFFFF">
    <tr>
        <td>

            <table>

                <!-- ROW 1 -->
                <tr>
                    <td>[CONTENT]</td>
                </tr>

                <!-- ROW 2 -->
                <tr>
                    <td id="signoff">
                        <p id="questions">If you have any questions, email us at <a href="mailto:support@example.com">support@example.com</a> or call <span class="tel">01234567890</span>.</p>
                        <p>Thanks,</p>
                        <p>Company</p>
                    </td>
                </tr>

                <!-- ROW 3 -->
                <tr>
                    <td id="signature">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td id="logo" colspan="3">
                                    <img src="http://www.example.com/images/email/logo.gif" alt="Company" />
                                </td>
                            </tr>
                            <tr>
                                <td id="contact">
                                    <p><a href="http://www.example.com">www.example.com</a></p>
                                    <p><a href="mailto:support@example.com">support@example.com</a></p>
                                    <p class="tel">01234567890</p>
                                </td>
                            </tr>
                            <tr>
                                <td id="social">
                                    <a href="https://www.facebook.com/"><img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /></a>
                                    <a href="https://twitter.com/"><img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /></a>
                                </td>
                            </tr>
                            <tr>
                                <td id="address">Company, address, city, post code</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
</body>
</html>

Try viewing the HTML in your browser, and then try sending as an email to see what I mean.

What am I doing wrong and how can I make the email come through with the intended CSS?

It's a typical rule of thumb that you'll never achieve pixel perfection in every client due to the varying renderings by each vendor. What you should do no matter what is always inline your css. Even if you're running it through a tool, just do it out of practice without the tool. — Ryan Rich, Jul 26 '13 at 17:11
Instead of using padding and margin I would rely on empty columns and rows. — ZippyV, Jul 26 '13 at 17:17

Ennui · Accepted Answer · 2013-07-26T17:25:07.553

Use inline CSS styles whenever possible (not <style> tags on the page, but style="" attributes). Use HTML attributes (bgcolor, width, height, etc) whenever possible in lieu of CSS styles as there is broader and more consistent support. Define the styles individually on each element - don't rely on inheritance or the cascade.

By this I mean manually set the width, height, padding, margins etc via attribute or inline style on every single td and tr, etc.

You will unfortunately never achieve anything remotely resembling total consistency - usually I aim for it to look good in Gmail, Mac Mail and Outlook and that's the best you can really do. HTML emails are still a decade behind in terms of CSS support, and the extreme variation among the HTML rendering engines used by different mail clients means developing modern sites backwards compatible to IE6 is literally less of a headache than writing a good, heavily-designed email template.

I always refer people to Campaign Monitor's fantastic email client CSS compatibility chart when asked this question. They also have a great guide to coding HTML emails.

Spot on answer. I write html emails as part of my job and it's a pain in the butt. Luckily we have access to a great email testing service called [Litmus](http://litmus.com). If you can afford the $80 per month for the base plan, I'd highly recommend it. — Matt Whitehead, Jul 29 '13 at 03:35

score 4 · Answer 2 · answered Jul 26 '13 at 18:07

You're running into spacing issues mostly because you are using paragraph tags. You need to zero out the margins on your <p> tags. Refer to this article by Email on Acid

Personally, I never use <p> tags as they are less consistent than double <br>-ing it.

Padding works on tables reasonably consistently - It can collapse if someone forwards your email though. Same goes with empty table cells if you don't put a   in them. I suggest always using empty cells with nbsp's unless it is something that is not structurally important.

Also, another note about declaring your padding, you'll need to write top/bottom/left/right separately and can't stack them into the one css padding:; declaration unfortunately.

Also your color declarations need to be 6-digit hex, and inline everything before you send.

score 0 · Answer 3 · answered Jul 26 '13 at 17:15

You need to use super specific inline CSS for emails as all the mail clients like to do their own thing when it comes to rendering the email. It can be more of a pain than, dare I say it, developing for IE! By super specific I mean, don't assume anything! Set everything explicitly.

HTML emails in 2013: How to control spacing between elements like paragraphs and images?

3 Answers3

Linked