Paragraphs in HTML

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?

28 thoughts on “Paragraphs in HTML Email”

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

  2. What about forwarding? Do these techniques preserve the correct appearance even after the email is forwarded from the Yahoo or Outlook interface?

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

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

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

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

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

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

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

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

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

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

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

     
    Your Paragraph Here..
     
    Your Paragraph Here..
     

    [/code]

    It’s overkill I know – but it’s the only way to get consistency across all email clients.

  14. @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]

    Text text text
    Text text text
    Text text text

    [/code]

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

  16. @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?!?

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies