CODEWITHSUNDEEP
htmlcssemailhtml-email
Scottf007
Scottf007

Reputation: 509

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

Upvotes: 6

Views: 14334

Answers (4)

rafaelbiten
rafaelbiten

Reputation: 6240

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

Upvotes: 3

East of Nowhere
East of Nowhere

Reputation: 1396

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

Upvotes: 2

breezy
breezy

Reputation: 1918

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>

Upvotes: 3

Aaron Digulla
Aaron Digulla

Reputation: 328536

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

Upvotes: 1

Related Questions