Spacing in HTML emails

Question

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

Answer 1

You should use inline styles in email markup.

Here is an example of how to separate paragraphs consistently within your email build

<p style="margin:0 0 15px 0;padding:0;line-height:value;font-size:value">Insert Paragraph information here</p>
<p style="margin:0 0 15px 0;padding:0;line-height:value;font-size:value">Insert Paragraph information here</p>

Answer 2

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;"

Answer 3

Do yourself a favour and take some time to read the article 7 Tips Regarding Margins and HTML Padding in Emails from Email on Acid.

It's going to help tremendously! And I'm serious...

Answer 4

The best way today is use a p element per line and style that with CSS.

And you should consider to replace most of the table based layout with divs and CSS styles (except where you need horizontal elements with the same height, obviously).

My answer would be better if you would state a specific problem like: "How can I achieve this <insert image here> with HTML?"