Symphonious

Living in a state of accord.

The Email and P Myth

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…

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

*