You may have noticed your emails looking a little cramped in Outlook.com recently. The culprit? Discontinuation of support for the margin property in these email clients. Rather than honoring your carefully spaced paragraphs and images, Hotmail and Outlook.com are now completely stripping margin from paragraph tags, leaving default values (0 for the top, right and left; 1.35em for the bottom, to be exact) in their place.
Outlook.com no longer support the following CSS properties:
Since Outlook.com previously had support for margin-right, margin-bottom and margin-left, it’s anyone’s guess as to why they decided to kill support for margin entirely.
We tested all sorts of combinations, slipping <span> tags inside paragraphs, fiddling with <div>, and swapping margin for padding. Since Outlook.com seems to be stripping margin from all block-level elements (not just paragraph tags), finding a direct replacement for <p> doesn’t seem possible. Replacing margin with padding on paragraph tags works well in Outlook.com, but Microsoft’s desktop clients didn’t fare so well: Outlook 2007/2010/2013 don’t support padding on block level elements. If you’ve somehow been blessed by an audience that doesn’t use Outlook to read their emails and you’re determined to continue using paragraph tags, you could definitely give this a shot:
<p style=”padding-top: 20px;”>
Use <TD> and swap margin for padding
Placing each block of text or image inside it’s very own <td> cell — along with inline CSS padding — nets the best results across major email clients. While web development purists are rightfully hesitant to sully their emails with non-semantic markup, this method has worked well for us over the years. And while padding doesn’t work quite the same way as margin, it gets the job done. Just be especially careful when using borders, since you’ll need to play around with nesting tables to get your desired effect while relying solely on padding.
One thing to keep in mind when using table cells for text containers is that webmail clients viewed in Internet Explorer will center-align text by default, so unless that’s the effect you’re aiming for, be sure to specify the text alignment you prefer on each <td>.
Our HTML typically looks something like this:
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<td style=”padding: 10px 20px 0px 20px; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px;”>Aesthetic locavore put a bird on it, pug yr bespoke organic. Lomo small batch master cleanse, wes anderson quinoa +1 irony. </td>
<td style=”padding: 10px 20px 0px 20px; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px;”>Biodiesel photo booth single-origin coffee mlkshk actually, pug ugh keffiyeh cray truffaut polaroid direct trade fanny pack. </td>
You could also try adding cellpadding or cellspacing in your <table>.
Discontinuation of float support
The folks at Campaign Monitor also observed another (although slightly less concerning), change: discontinuation of support for float. Ros wisely noted that float “has traditionally had fairly mediocre support in email clients anyway.”
Need more help?
Ask the world's largest community of email designers.Post a discussion in the Litmus Community