Outlook.com put extra p around my spaces

Question

I'm designing email template. Between some texts I need to put break lines. So far so good on most clients except outlook.com(on browser). It wraps my <br> inside a <p> which has big margin by default.

I have tried to use <br>, <td> with space, <td> with <span> and space inside and <td> with <p> with margin:0 and space inside. Each time i got my html wrapped in a <p>.

Why it wraps my html in <p> ??

Answer 1

I've never found the .ExternalClass hacks to be of any use. Outlook.com is very iffy in general about line-height and <p> tags as a whole, so I've found the best thing to do is remove all <p> tags from my emails just and put all text sections inside a <font> tag inside the <td>.

I ran a quick litmus test and wasn't able to reproduce your results, with either <br> or <br/> however you could just nest a table inside a <td>, don't define heights, and use multiple rows in that table to simulate breaks. I've found that it doesn't mess with my usual line-height rhythm.

Answer 2

Outlook has trouble rendering html emails correctly.

There is a little hack that might help you:

<style type="text/css">

.ExternalClass p (Or whatever, you can target pretty much anything here)
{line-height: 50%; margin:0;} 

</style>

This will talk to outlook's native stylesheets and adjust those, since outlook applies the .ExternalClass class to your email.

Here is some important information on the subject: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

Many will say that all styling in html-emails has to be inline. This is true to an extent because some clients will strip the head and body tags from your email. But for those that don't, like outlook, it is a valuable space for work arounds.

Hope this helps.

Answer 3

The reason Outlook wraps everything in <p> tags is because it uses the MS Word engine to render html instead of a browser based renderer.

The p tags are unavoidable and the suggestions above are good ways to 'zero out' the unwanted margins. Outlook doesn't strip <style> tags, however some MS Exchange servers do (for security I assume), so if you are finding your style tags ignored in Outlook, try sending to a different domain email address (particularly a non corporate one) and you should find it will work as expected.

I also suggest never using <p> tags in email and using double <br> tags between paragraphs and &nbsp;<br> or <br>&nbsp; for top and bottom 'padding' within table cells.