Paragraphs in HTML Email
Paragraphs may seem like one of the simplest HTML tags, but you’d be surprised how much trouble some clients can give you with them. The main culprits here are Outlook.com and Yahoo! Mail. Outlook.com enforces 131% line height and a margin of 1.35em under each paragraph. Yahoo! Mail, on the other hand, adds no margin whatsoever, making paragraphs look jammed together.
Take a look at how Outlook.com (above) and Yahoo! Mail (below) will render your paragraphs.
Luckily for us, the fix is simple.
You’ll want to reset the paragraph spacing and line height in CSS in your style block, then set the styles inline. This fix is already included in our boilerplate for HTML email.
<style type="text/css">
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
p {margin:0; padding:0; margin-bottom:0;}
</style>
<p style="margin-top:0;margin-bottom:10px;"></p>Check out the samples below, with our “fix” coding added in.
Other Techniques
Another popular technique to achieve spacing is using break tags, <br>, after each block of text. These tags perform well in all clients too, though controlling their exact size can be tricky. What techniques do you use to achieve even spacing across all clients?
Author: Kyle Lapaglia
Author: Kyle Lapaglia
28 thoughts on “Paragraphs in HTML Email”
Comments are closed.
My issue was that the line-height I was using with my font size was creating too big of a space when I needed to use
. My workaround was to use
to give me what I wanted- better vertical rhythm in the text portions, but not so huge line heights in the spaces in-between paragraphs.
I use the
ones, it’s sometimes tricky but at least I’m sure it’s working in all email clients!
What about forwarding? Do these techniques preserve the correct appearance even after the email is forwarded from the Yahoo or Outlook interface?
Forwarding can easily screw up everything. Clients like Outlook will totally mess with your code.
Getting readers to forward my newsletter is my most effective method of getting new subscribers, so I think it would be a great feature if Email On Acid’s testing suite included screenshots of emails forwarded between the top three or four clients. Examples: received by Yahoo and forwarded to Gmail; received by Outlook and forwarded to Yahoo, etc.
We’ll add that to our Idea Bucket, thanks Scott!
tds w/ padding-bottom. Sounds circuitous, but in the end it’s not more work than paragraphs, considering all the fixes.
btw: I’d recommend testing different line-height settings in the hotmail fix. Depending on the font-size and -type 100% can be to little.
Thanks for the information however, why would you trouble yourself with paragraph tags in email when you can just use line breaks with a font-size and line-height or separate tables with a spacer cell to create the same effect without any of the concerns?
For me, I would use no margins/paddings for paragraphs & then make them look like by adding
tags. We could also use a spacer image with desired height with display=”block” or an empty div with desired inlined height.
Hi.
It’s funny how paragraph tags are being used in emails and the walk around is to make it look like break tags. It’s just a matter of remembering shift enter rather than a hard enter on editors I guess. When will people realize it.
Cheers
I’m wondering, why use paragraph elements at all? Why not:
?
Thanks for all the comments! Just to be clear, this blog is intended to cover best use for Paragraph tags in HTML email. We weren’t trying to say that P tags are the “best solution” for spacing. We may do another blog which would include our recommendations for spacing in HTML email, though, so we do appreciate all the suggestions.
Happy coding!
Thanks Geoff! Here’s how I control the height of BR’s – I wrap two br’s in span and style that span with fontsize and lineheight of desired gap height. For example:
I tend to avoid P tags and use them only when there are floated images inside. Otherwise, good old paragraphs in separate rows with padding on TD’s.
Here’s the reason WHY we use paragraph tags in email.
Because if you have tables aligned side by side, the only way to fix this from breaking in Outlook is by using paragraph tags wrapping content in the first TD of your table among other things.
So for some of us we MUST use paragraph tags.
I use rows with cells for spacing between paragraphs. I don’t use the
at all.
What if one is not a programmer? Is there any way I can assure that my paragraphs will have breaks when the recipient receives them? I have Outlook 2007.
@Maria Then use [code]
[/code] between the paragraphs and don’t use p tags at all.
My problem is that I am writing emails with paragraph breaks and some recipients receive the emails without the breaks. How can I get my paragraph breaks to be guaranteed to show up?
Don’t use paragraph tags to rely on spacing.
For HTML emails, the only real way to achieve perfect spacing across ALL email clients is to create spacing with table rows.
So instead of doing this:
[code]
Your Paragraph Here..
Your Paragraph Here..
[/code]
You are better off doing this:
[code]
[/code]
It’s overkill I know – but it’s the only way to get consistency across all email clients.
@Jeff, your method will work, but there’s a more elegant way – putting each paragraph text into separate rows and setting style padding-bottom on the TD’s. This is more elegant way. Also, FIY, height is not supported reliably, check Campaign Monitor CSS support tables.
[code]
[/code]
Guys, you obviously know what you’re doing in the programming arena, but I’m just an ordinary soul trying to send out a multi-paragraph email that doesn’t look like a wall of words when it arrives. Any easy techniques you can suggest? Should I just use Gmail and abandon Outlook altogether?
@Maria Whoa, did I understand correctly, you are not using an Email Service Provider (such as Mailchimp, Campaign Monitor, Responsys, Exact Target etc) to send your newsletters?!?
No. I’m just using Outlook and I don’t have the expertise to use anything else. I am on the wrong blog?
Hi Geoff,
I have been having a problem with large text in outlook’s web versions. It seems to create a space the same size as the text underneath each paragraph. I have looked through a couple of your line-height posts, but nothing seems to work. Have you ever seen anything like that?
dgwebteam,
So I assume you have tried the techniques in this post: https://www.emailonacid.com/blog/article/email-development/line_height_and_outlook.com
If that doesn’t work, I would remove all of your CSS and see how it looks. If it looks better, it’s one of the styles causing the issue. If it still looks messed up, let me know. Also please let me know which email client/browser specifically.
First off I would like to say great blog! I had a quick question that
I’d like to ask if you do not mind. I was curious to know how you center yourself and clear your head before writing.
I have had a hard time clearing my thoughts in getting my
ideas out there. I truly do take pleasure in writing but
it just seems like the first 10 to 15 minutes tend
to be wasted just trying to figure out how to
begin. Any ideas or tips? Thank you!
Hi there! Do you know if they make any plugins to protect against hackers?
I’m kinda paranoid about losing everything I’ve worked
hard on. Any recommendations?
Hello there, You have done a great job. I wil certainly
digg it and personally recommend to my friends. I am sure they’ll be benefited from this web site.