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 and Yahoo! Mail. 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 (above) and Yahoo! Mail (below) will render your paragraphs. outlook_paragraphs yahoo_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;}

<p style="margin-top:0;margin-bottom:10px;"></p>
Check out the samples below, with our "fix" coding added in. outlook_paragraphs_withstyl yahoo_paragraphs_withstyle

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?