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

html css email html-email

16,787

Solution 1

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.

Solution 2

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.

16,787

Author by

BadHorsie

Updated on June 29, 2022

Comments

BadHorsie almost 2 years

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:[email protected]">[email protected]</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:[email protected]">[email protected]</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?