Hotmail and Outlook.com Drop Support for Margin54
You may have noticed your emails looking a little cramped in Hotmail and 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.
That’s right: Hotmail and Outlook.com no longer support the following CSS properties:
Since Hotmail and 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.
Personally, I’ve never been a fan of using paragraph tags or margin in email. Yahoo! and Gmail have both had issues with paragraph spacing in the past, and margin never seems to render consistently, especially in Microsoft clients. Setting my margin-bias aside, I asked email troubleshooting guru Brock Armstrong to dig in and see what he could find. The results, unfortunately, weren’t too promising.
ON THE HUNT FOR A FIX
Brock was a champion: he tested all sorts of combinations, slipping <span> tags inside his paragraphs, fiddling with <div>, and swapping margin for padding. Since Hotmail and Outlook.com seem 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 Hotmail and 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;">
THE VERDICT: 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 (Brock included!) are rightfully hesitant to sully their emails with non-semantic markup, this method has worked well for me 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>.
My HTML typically looks something like this:
<table cellpadding="0" cellspacing="0" border="0"> <tr> <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> </tr> <tr> <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> </tr> </table>
You could also try adding cellpadding or cellspacing in your <table>. However, I still have nightmares from Gmail’s brief lack of support for cellpadding back in 2009 (yes, I’ve been coding emails for way too long!)
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.”