Spacing in HTML emails

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>

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


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...