Search code examples
htmlcssemailhtml-email

Spacing in HTML emails

I am designing a little app that can email one of 6 design templates with common content.

What is the best (most consistent) way to maintain space and layout of the text (between lines etc.)

We were thinking about using simple <br>, but we could lose some flexibility compared to something else. It is a table based layout

Cheers

Solution

  • Yahoo (and possibly other email clients) interpret <p> differently than most others--it's hard to make a <p> look right in Yahoo without making it look wrong in all the others. In my experience you will get more control over spacing / formatting by using <br /> along with line-height and of course the font size. You can give a <br /> tag an inline line-height style to tweak spacing even more specifically.

    However:

    • Outlook 2007/2010 tends to ignore the line-height property.
    • The margin styles are used and/or ignored differently by all the email clients. Using padding rather than margin when possible is a little more reliable.

    The best spacing & layout control available in HTML-for-email (which is limited to table-based layouts and inline styles, as you know) is to separate lines / paragraphs of text into different table cells / rows, and control spacing with the width & height of the <td> elements. With this method, you would almost always have style="border:0; margin:0; padding:0;"