Hotmail and Outlook.com Drop Support for Margin

[ 55 By

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:

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Since Hotmail and Outlook.com previously had support for margin-rightmargin-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.

GET ALIGNED

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.”

ARE YOUR EMAILS HAVING ANY QUIRKS IN OUTLOOK.COM?

With Litmus’ Email Previews tool you can test your email in Outlook.com (plus 30+ other desktop, mobile, and webmail clients) to make sure it’s rendering properly. Sign up for a free 7-day trial today!

Start testing →

  • http://twitter.com/CampaignMonitor Campaign Monitor

    Thanks for the shout-out, all of us here at Campaign Monitor really appreciate it! Just a quick word of warning – padding on p and div tags is not supported in Outlook ’07+, but it’s still the best workaround we’ve got… For now. Thanks for getting the word out! 

    • https://plus.google.com/105076725141939280120/about Stephan Hovnanian

      I posted a Outlook 2007/10 whitespace fix a while back on my site, seems to work pretty well for handling the margin issue (transparent pixels and background colors). Clunky, but works.

      • http://www.litmus.com Justine, Litmus

        I’m always amazed at the range of different coding styles (HTML markup is a lot like handwriting… everyone’s is a little different!).

        Thanks for sharing, I hope that someone with similar “handwriting” finds it helpful! 

        • https://plus.google.com/105076725141939280120/about Stephan Hovnanian

           Great analogy, Justine!!

  • Kevin Freisen

    If you want to use padding for block elements and still have it work in Outlook07+ you can abuse the hell out of inline !Important.

    If you had:

    Turn it into

    Complete eye-sore, but its then consistent across clients. Outlook07+ doesnt like anything with inline !important, so for 07+ it reads it as margin-bottom:10;padding-bottom:0, and for everything else it gets the reverse.

    Its worked for me for every block element except ul, which I cant figure out for the life of me.

    • http://www.litmus.com Justine, Litmus

      Thanks for the note, Kevin! As I mentioned in the post, I tend to use all table cells. It might not be pretty (or semantic) but it gets the job done. I also have had a lot of trouble with lists in Outlook… I tend to fake it with tables and • instead. 

  • http://twitter.com/BrockSky Skywalker Armstrong

    Something I found weird/interesting while I was researching this was that Hotmail and outlook.com both allow padding on if you explicitly set it to in Chrome and Firefox BUT not in IE – What?!?!

  • http://twitter.com/BrockSky Skywalker Armstrong

    Something I found weird/interesting while I was researching this was that Hotmail and outlook.com both allow padding on if you explicitly set it to in Chrome and Firefox BUT not in IE – What?!?!

    • http://www.litmus.com Justine, Litmus

      I’d be curious to see if anyone out there is placing content in ? Again, probably one of those stylistic things? I’ve never done it (I always place content in and leave unstyled) but that doesn’t mean someone else out there isn’t making it work… 

  • southernroutes

    Anyone find a way to merely reset or disable Hotmail’s & Outlook.com’s embedded p margin values?

    • http://www.litmus.com Justine, Litmus

      The folks at Campaign Monitor tried, without much luck, I’m afraid: http://www.campaignmonitor.com/blog/post/3921/outlook.com-drops-margin-and-float-support-entirely

  • JuliaSpangler

    Thanks for sharing these fixes! I just redesigned some of our email templates a couple of months ago, and I was so frustrated when they started messing up in Hotmail. This at least points me in the right direction for getting them back to normal!

    • http://www.litmus.com Justine, Litmus

      So glad we could help, Julia!

  • Shaimoom Newaz

    What a strange, strange land I am in. The land of email coding.

    • http://www.litmus.com Justine, Litmus

      It is a strange land, indeed. 

  • http://twitter.com/Niaccurshi Lee Griffin

    Yet you also have to be very careful with padding. We do not, as standard, use padding or margin in our emails…if we need space to be created we will use a table cell (in a table if needs be) to do it. It has consistently been the only way to ensure that an email renders the same on all browsers, clients and web clients.

    • http://www.litmus.com Justine, Litmus

      Hi Lee! I’ve had pretty good luck with only applying padding to cells, and sparingly so. 

  • http://twitter.com/MikeKissel Mike Kissel

    I very much enjoy the copy you’ve provided in your HTML sample ; )

    • http://www.litmus.com Justine, Litmus

      Thanks, Mike! It’s ‘hipster ipsum’ – http://hipsteripsum.me/

  • Megan Radich

    Why certain clients drop support for legitimate HTML is beyond me. One reason I’m glad my full-time job isn’t email coding anymore.

    • http://www.litmus.com Justine, Litmus

      It baffles us, too, Megan! I understand that webmail providers would disable some CSS as a means to prevent hidden malware and other nonsense, but margin??

  • pixarea

    Any source / justification from Microsoft on the why of this ?

    • http://www.litmus.com Justine, Litmus

      Unfortunately, they generally don’t announce or comment on issues like this. Some folks in the email community have had luck with getting in touch (for instance, Hotmail did fix an issue where they were turning standard symbols into oversize emoji). 

  • http://www.facebook.com/people/Shamick-Gaworski/1423681102 Shamick Gaworski

    I am coding emails … this is frustrating to say the least … no padding no margins … then what? table width and padding maybe … got to read this first but I agree that is really interesting that email clients drop legitimate html instead of adding legitimate html … not very logical … 

    • http://www.litmus.com Justine, Litmus

      Hi Shamick! If you take a look at the HTML source on our newsletters, you can see how we approach it. There’s also a code sample above. I hope that helps!

      • jengraph

        I’ve taken a look at your source code of a newsletter. I see this text-decoration: initial; what is initial for?

        • http://www.litmus.com Justine, Litmus

          Our January newsletter? I just searched for this and didn’t see this being used. Usual values are “none” and “underline” 

  • http://twitter.com/grevory Gregory Pike

    Dear email clients,

    Why not adopt web standards when rendering HTML? You know, instead of devolving.

    For desktop apps, why not consider WebKit? If you’re in the browser, it will render the HTML if you only allow it.

    Am I crazy?

    • http://www.litmus.com Justine, Litmus

      No, you’re not crazy at all! I completely agree. 

  • southernroutes

    This issue is a bit different from, say, and actual email ‘client’ like Outlook 2013 dropping support for some CSS properties. These are webmail clients, which, in my opinion, have no reason not to support even the most basic of web standards. It’s one thing to drop support for something, but it’s entirely different to remove our carefully thought out and tested CSS and replace it with their own, arbitrary values. 

    Microsoft will likely never explain or acknowledge this change and, well, that’s nothing new, is it. They break things, we collectively figure out ways to work around them all the while trying to explain to our bosses and clients why their emails and newsletters looks like crap in certain configurations. Just another day at the email office.

  • http://hemalshah.net/blogs/ Hemal Shah

    Oh not again! I already had a tough time convincing Outlook to read my HTML the way it looks on the darn Internet Explorer. But no, she never relented. 

  • http://www.litmus.com Justine, Litmus

    Outlook 2007+ does have a quirk with padding on td cells. If you have more than one cell in the same row, with different amounts of padding-top or padding-bottom on the cells, all the cells in that row will adopt the greatest amount of padding. So if there were three cells, and one had padding-top of 20px, another had padding-top of 50px and the last had no padding, they would all have 50px of padding. This only affects top and bottom padding, though. 

  • southernroutes

    It’s just recently been announced that Hotmail is going bye-bye and that all its users will be migrated over to Outlook.com accounts over the next few weeks/months. It likely won’t help us as there will still be more or less the same number of users who are affected by this dastardly move on Microsoft’s part. Remind me again, this is the same forward thinking company that brought us such universally praised products as the Kinect and the Surface UI?

    • http://www.litmus.com Justine, Litmus

      Don’t forget Xbox! The guys at the office can’t do without it. While Outlook.com is an improvement over Hotmail, it’s a bummer that they all just can’t support standard HTML. The good news is that we’ve got you covered for Outlook.com screenshots! 

      https://litmus.com/blog/new-email-client-outlook-com

  • http://twitter.com/rachelmc Rachel McClung

    Thanks for reporting on this, Justine. It’s tough to be a margin these days, but at least we won’t slowly go crazy trying to figure out why an email that looked fine the other day is now broken.

    • http://www.litmus.com Justine, Litmus

      Glad it was helpful, Rachel! When webmail providers make unannounced changes I don’t think they realize all the hair-pulling they cause designers and marketers :(

  • http://profile.yahoo.com/QEAPRMT54SWYRTLIP46LVN272E AJ

    Microsoft sucks. They’re forcing their products to be the standard.

  • Chris

    Has anybody else noticed the extra space they add between lines of text now? It is really messing up the space between ‘s when I create emails. It looks fine in all clients and Hotmail was good until the recent change to Outlook.com. Anybody else encounter this and know how to correct it without messing up the way the font looks in other email clients?

    • http://www.litmus.com Justine, Litmus

      Hi Chris! I’ve heard some reports of line-height behaving erratically in Outlook.com, but I’ve not experienced it myself. Are you placing your text into p tags, or in td cells (as suggested above)? I always use td cells and haven’t experienced any issues.

      • Chris

        Here is what I use:
        Sample Text

        I also use width, valign, and align attributes with the tag but I don’t imagine that would cause anything related to the space in between lines of text.

        • http://www.litmus.com Justine, Litmus

          What type of container/parent element is your font styling in? Try a table-based layout and applying your font styles direct to the td cell?

          • Chris

            I’ll try the container/parent element styling and see if it affects that with my next test.

          • http://www.litmus.com Justine, Litmus

            Keep me posted on the outcome!

  • Art Thompson, Jr.

    So, I’ve resorted to using <br /> tags to create uniform paragraph spacing. It renders almost identically across all browsers. It doesn’t address the ultimate issue of Outlook-dot-com’s surreptitious bottom-margin hijacking of the overall <p> tag, but at least I can quickly flow several paragraphs of text without having to mess with tables.

    That being said, I’m also using bare text within heavily styled TDs (using padding, not margin for bottom spacing) for when I need accurate positioning in a table-based layout. That totally eliminates any Outlook-dot-com margin issues.

    And for lists? Tables with padding-bottom.

    • http://www.litmus.com Justine, Litmus

      That sounds very similar to my strategy! As non-semantic and horrendous as it sounds… it works!

      • Art Thompson, Jr.

        When working with email, I think it’s okay to forget about semantic markup. We’re dealing with some medieval clients after all. :-)

        • http://www.litmus.com Justine, Litmus

          I completely agree! The funny thing is that I originally learned HTML as table-based layouts and never really made the leap to modern CSS layouts… so it doesn’t frustrate me as much as it does some other folks :)

          • Art Thompson, Jr.

            You and me both. I think I coded my first “home page” in 1993/4 and that’s the only reason I work on emails today. If I didn’t have all of that pre-CSS HTML experience, I don’t think I would be so into email the way I am now.

  • Samantha Morgan

    I have resorted to using table cells a long time ago to remedy the Yahoo/Gmail issues. Something to note for the padding “fix” listed above, Outlook desktop client applies padding to the adjacent table cells within the same row. So you may end up with unwanted padding in cells that you wouldn’t otherwise want it. My fix is to nest a brand new table within the cell I want my text to appear so it can be styled individually from the rest of the surrounding elements.

    • http://www.litmus.com Justine, Litmus

      Great tip, Samantha! I do the exact same thing to avoid issues with padding in Outlook.

  • http://jesin.tk/ Jesin

    What does one do if they want to reduce/remove the bottom margin?

    • http://www.litmus.com Justine, Litmus

      Since margin is not supported in these email clients, you’d need to use padding instead, and set it to zero—take a look at the method outlined above.

  • Lynden

    Does someone at MS wake up in a morning and think to themselves, “how can we make life harder for people?” I just fail to see any benefit to anyone for these changes. The ONLY person these changes effect is the person creating the emails (A.K.A… you & me), and that’s a negative effect. 80% of the people that receive these have no idea what goes in to creating them, they won’t even know what padding or margin is. So why do MS continually insist on making these changes to put people out?

    • Jason Rodriguez

      There’s an interesting comment thread on Campaign Monitor’s announcement of this issue: http://www.campaignmonitor.com/blog/post/3921/outlook.com-drops-margin-and-float-support-entirely

      Without talking to anyone on the Outlook.com team, it seems like the two most likely candidates for reasoning are 1) security concerns (people can use negative margins to hide information) and 2) they just don’t want the hassle of worrying about rendering margins.

      It’s frustrating for email designers, but we aren’t their market. They ultimately care about the end users, who don’t send HTML emails from the client. Killing margins probably helped them out in some way, too.

  • Jeffery

    They wonder why people hate microsoft when they do stupid stuff like this. Why on earth do I need to replace a simple paragraphs with a table. The layout of my email is already made up of enough tables its just stupid but that’s common sense for microsoft.