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. Usingpadding
rather thanmargin
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...