One of the greatest frustrations for anyone who develops an HTML editor is the constant supply of people who are convinced they want to use BR tags instead of P tags. Most of these are just people who don’t want “double spacing” and they’re happy once you give them the magical CSS incantation:
p {
margin-top: 0;
margin-bottom: 0;
}
The other group however are people writing HTML emails who insist that P tags are completely incompatible with some email clients and cause rendering problems. At one point it seems that Yahoo! Mail really did strip them entirely but now it just applies a different default CSS styling (ironically, the magical CSS above that removes the extra spacing). So if you naively use P without specifying the padding you want, some clients will display a blank line between paragraphs, others, notably Yahoo!, will push all the lines immediately under each other. The solution is of course the opposite magical CSS incantation:
p {
margin-top: 0;
margin-bottom: 1em;
}
Solved right? Nope. This runs straight into the where the heck do I define styles? problem. In HTML, it should be:
<html>
<head>
<style>
p {
margin-top: 0;
margin-bottom: 1em;
}
</style>
</head>
<body>
…
</body>
</html>
However while this works in some clients, it has no effect in most. Instead, the common wisdom is to move the style tag into the body tag:
<html>
<head>
</head>
<body>
<style>
p {
margin-top: 0;
margin-bottom: 1em;
}
</style>
…
</body>
</html>
Which works almost everywhere. Enter GMail. GMail never respects the style tag, only inline styles. So now you need to write your paragraphs as:
<p style=”margin-top: 0; margin-bottom: 1em;”>…</p>
Thankfully you can use the margin shorthand if you know what you want the left and right margins to be as well:
<p style=”margin: 0 0 1em 0;”>…</p>
I would strongly recommend using embedded styles while editing and then just use post processing to inline all the styles – Premailer can do that for you.
As far as I can tell, there is no need to avoid P tags in email anymore and sampling a number of emails from various clients that happened to be in my inbox, they turned out to appear in emails from a few different clients though that’s far from scientific and it was still intermingled with a lot of <br> and <div><br></div> hacks. I would be very keen to hear from anyone who knows of an email client that cannot be made to render P tags correctly.
With a bit of luck we may be able to start moving away from the horrific abuses of <br> tags…
