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