Yahoo! Webmail ignores paragraph spacing08/04/2010
Creating an e-mail template is no simple task. This is because the e-mail world is far from adopting uniform display standards. Honestly, I don’t know why we can’t agree on and adopt a standard. In the e-mail world, Microsoft is furthest from compliance to HTML standards. That said, this blog post is about Yahoo!. With Yahoo! accounting for about one-third of all B2C e-mail, it is important to develop an attractive and well-formatted Yahoo! e-mail template. Though paragraph margins vary slightly from one browser and e-mail client to the next, Yahoo! has chosen to completely ignore the HTML specification by rendering zero spacing between paragraph tags. The Yahoo! <p> tag issue has existed for more than three years and is consistent in Firefox, Internet Explorer, and Safari.
When rendering the following code for an HTML e-mail template:
You expect to see the following result:
With Yahoo! webmail, the following is rendered:
Note the lack of space between the paragraphs. Thankfully, the solution is straightforward. To resolve, add a style to the paragraph tag with 1em of bottom margin. The fix will work with an embedded or inline style. I find inline styles to be more compliant. The inline fix looks like this:
The margin-bottom property is supported in all major browsers. The property sets the vertical distance from the bottom border edge of the element concerned to the edge of its containing block, or the element that’s vertically adjacent underneath. Size can be set to px, em, in or cm.