Why do <p> elements show up differently in Rackspace email?

Question

Why do <p> elements show up differently in Rackspace email, versus other email clients such as Gmail, Outlook.com, Outlook (Desktop Application), and Mail (email client that comes with OS X)?

Here is what my <p> elements look like in Gmail, Outlook.com, Outlook, and Mail:

And here is what my <p> elements look like in Rackspace webmail:

Here is what the code inside of my email looks like:

<p>TEST LINE BREAKS</p>
<p>TEST LINE BREAKS</p>
<p>TEST LINE BREAKS</p>
<p>TEST LINE BREAKS</p>

I tried using this application to normalize my email, but it still does not look the same on Rackspace: http://premailer.dialect.ca/

How could I get the line breaks to appear in the Rackspace email?

Answer 1

Different email clients have different default styles for certain tags (like web browsers). In this case, seems Gmail, Outlook.com, Outlook, and Mail give an unstyled <p> tag a small bottom margin, whereas Rackspace mail does not.

This can be reset by defining an explicit margin. Using an inliner like premailer works just fine, though inlining by hand is more straight forward.

<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>
<p style="margin: 0 0 10px;">TEST LINE BREAKS</p>