Outlook.com drops margin and float support entirely

After Hotmail's butterfly-like re-emergence as Outlook.com last year, we were certain there would be changes. However, we didn't think they'd be as trivial, yet as utterly maddening as dropping support for the margin CSS property.

Naturally, it didn't take long for our email designer friends to notice that without margins, elements in their email newsletters were collapsing into each other like bros at a Twister party. Our forums almost immediately lit up with reports that spacing between paragraphs, images and articles had vanished with margin and its variants - margin-top, margin-right, margin-bottom and margin-left.

Our first response was 'well wait, there has to be a workaround'. So we proceeded to hack away with attribute selectors, !important and even the esoteric .ExternalClass. Every time, Outlook.com stripped all mentions of margin from our HTML email code, simply leaving tantalizing semi-colons, like prawn tails after a seafood dinner.

A world without margins

The ever-observant Email On Acid were quick to the scene, with an in-depth post on Outlook.com's lack of margin support. In the absence of a workaround, they provided a great nugget of advice:

Though it will never work in quite the same way as margin, the padding property can be used in many places where margin would have been ideal. Just remember that padding goes inside the border of an HTML element, whereas margin goes outside the border.'Emailology: Outlook.com Margin-alizes CSS Properties', Email on Acid

We also recommend going back to roots and using table cells and the cellpadding and cellspacing attributes where possible. These are the cornerstones to a truly bulletproof HTML email layout.

Float is a no-go, too

Although this will affect far less designs, it's worth mentioning that Outlook.com has also dropped support for the float CSS property. This has traditionally had fairly mediocre support in email clients anyway, so we've generally recommended using the align HTML attribute instead.

Finally, don't forget to test your existing email designs and templates again in Outlook.com/Hotmail. You may be in for a bit of extra work during what's generally a quiet part of the year! We'll be updating our CSS support in email guide very soon to reflect these changes.

Has Outlook.com's decision to drop margin affected you? Let us know in the comments below.

Posted by Ros Hodgekiss

53 Comments

  • Mathias
    29th January

    I applaud Microsoft’s efforts of keeping us marketing folks and template designers in business.

    But, on a more serious note, WTFF?

  • Justin
    29th January

    Padding doesn’t really work in the later versions of Outlook for block level elements like divs, in fact the previous fix was to use margins! So now we have a situation where you can’t really use either if you want your emails to look the same across all of Microsoft’s horrific platforms.

    Have they declared war on email marketing?

  • Redferret
    29th January

    They’re being ignorant, trying to please those who send text based emails, while ignoring the growing chunk of the inbox that is opted in content. If the user wants it, but can’t view it properly then Hotmail fail in their most basic of functions, allowing people to receive and read the emails they want!

    There needs to be a push for some sort of strictly defined Email HTML standard, the Email Standards Project was more criticism than proposal, lets make a standard thats conservative (no float/z—index etc..) but scalable (for mobiles) and most important consistent for the user.

    Thats m rant over

  • DRoss
    30th January

    …just waiting for the day we actually hear some positive, progressive news from Microsoft and email.

  • John
    30th January

    Thanks for the props Ros! Much appreciated! (John from EOA)

  • Julie
    30th January

    I’ve just avoided margin in general and used an extra column or row as needed when there’s space between things. Not ideal, but also never seems to break. :)

  • Michael C.
    30th January

    The loops that email clients are forcing us to jump through to get HTML email reminds me of those nightmares you have where everything is going terribly, horribly wrong, and then you wake up and realize that things are normal-

    Except without the waking-up part.

  • Allan White
    30th January

    Is there any information as to why they they *removed* a rendering feature?

    I’m curious as to what is it at Microsoft’s culture that creates such awful, backwards HTML rendering in their products. Do they still frown on it? That’s so ‘90’s.

  • Ted Goas
    30th January

    I’m also curious about why Outlook insists on disabling such basic inline styles. If rendering emails using MS Word wasn’t bad enough, this seems like another step back without any benefit for outlook or MS.

  • Craig
    30th January

    The main problem is that it’s setting the margins on tags.
    We found that by switching all the tags to <span> tags and switching out their margins for padding on the containing <td>s works pretty well.
    You do have to set the text-align and line-height in the containing <td> and any <span>s nested inside your old paragraphs now need to have a set font-size.

    This has resulted in even more nested tables (yay) but it seems to work perfectly in our case.

  • Alexander Buch
    30th January

    I can think only of one single reason for removing the margin-feature: By setting a negative margin to a certain direction you can move an element into the invisible space, which might end up in legal issues…

    Otherwise: Congratulations Microsoft!

  • Martin
    30th January

    What’s CSS?

  • Ronni DC
    30th January

    It’s just one of those decisions that reminds me about when celebrities slide out of a car in a tiny dress and no underwear, only to give photographers a clear up-skirt view. It’s embarrassing Microsoft!

  • Travis
    30th January

    I’ve been switching out all my s for <span>s like Craig and setting vertical space with a nested table with a height on the <td> (I used to have to support Lotus Notes 6 and never bothered with margin or padding). This has brought good results.

  • Travis
    30th January

    Doh, my tags didn’t come through. I’m switching out my p tags for spans and using a nested table with a height set on the td.

  • Mark W
    30th January

    Hi Guys,
    Can you let us know if this impacts on the template builder and all the mails that have been built by our clients using it?
    Cheers

  • Mark
    30th January

    Bugger!
    Time for even more nested tables, I’ll experiment with cellpadding and cellspacing elements too.

    Could also look at <!—[if !mso]> conditional comment although that overlaps with outlook 2000-03, hotmail and windows phone.

    <!—[if !mso]><h1>GET A NEW EMAIL CLIENT</h1><![endif]—>

  • Matt
    30th January

    Arrrggghhhh! I’ve already wasted enough of my life hacking to get stuff rendering right in Microsoft products.
    ARE THEY DOING THIS ON PURPOSE?

  • Brian Thies
    31st January

    I’m escalating within Microsoft to see if something can be done.  It helped with the emoji issue in the past, hopefully we can get this resolved as well.  I have emails I’ve coded for Microsoft that are now breaking, so it should light a fire under someone.

  • Ian
    31st January

    And here I was thinking that I’d gotten off easy when Outlook.com first came out and it rendered e-mails the same as Hotmail.com.

    Hotmail already didn’t recognize any margin other than margin-bottom. Must you take that from me too, Microsoft?

  • MarketAgent 007
    31st January

    Margins have been very unreliable in MS Outlook for years. It’s no suprise they were dropped from Outlook.com.

    Shame on any coders who have ever used margins for styling.

    There are plenty of other styling options: padding, table columns, table rows, image spacers, line-height.

  • Mike
    1st February

    MarketAgent 007 - That doesn’t explain WHY they have dropped support for it at all.  It clearly wasn’t so broken before that people couldn’t use it effectively in the past.  I’m sorry, but tables are a better way of doing styling than floats because…?  Padding is better than margin because…?

    +1 to the many wondering why this change is happening.

  • MarketAgent 007
    1st February

    Mike,
    I wouldn’t say padding is better than using margins for styling, and I also wouldn’t say tables are better than using floats. It all depends on the scope of the project.  I use whatever attribute will work and remain consistent across multiple clients, browsers, devices, and OS. What I will say is margins are great BUT they’re unreliable in MS Outlook, Hotmail, and Outlook.com.  So, why would I use an attribute - such as margin - that is unreliable?

    As for the reasoning of WHY Outlook.com is dropping support for margin - my guess is that it’s one less headache for Outlook.com to deal with. They probably have enough challenging issues to deal with and it would make their lives easier by simply scratching that issue off their list. They’re well aware of all the other styling options available (tables, padding, etc., etc.).

    As for designers and coders, at least they can stop wondering and know for certain that margins aren’t going to work in Outlook.com.  Not using margins may save production time during testing.

  • Octavian Cioaca
    1st February

    You’ve gotta love this “INDUSTRY”. Anyone has his own standards! I share Matt’s opinion on this. I think Microsoft is doing this on purpose.

  • Ivo
    1st February

    why don’t they just used another render engine? WHY!?
    I guess they are building on such an old core that there’s no way back anymore. But if they really have passion for the Internet they should build it all over again from scratch…

  • Splatball
    2nd February

    This might piss off email developers and marketing people… But in general, most users could care less about how well HTML renders in email.

  • xander86420
    2nd February

    This just seems ridiculous and a real step backward.  As a web developer that currently does have html based emails go out to customers, this is going to make development a bigger headache to already trying reality when it comes to email.

  • Sam Jarvis
    4th February

    I’m in awe.

  • Matteo Capucci
    4th February

    Why they hate us?

  • deborah
    5th February

    Our business is a highly regulated business where for leagal reasons emails need to match across platforms and cliens. This change effects not just current mails that we can adjust for, but also previous emails that were perfectly fine a month ago now have to be rebuilt, retested and reintegrated. This causes extra work across many departments, just because they don’t seen to want to support, or create standards. To just take away functionality without warning seems very counterproductive and unnecessarily inconvenient. .

  • Brian Thies
    5th February

    MarketAgent 007, margin-bottom on p tags has worked fine on all email clients including Microsoft Outlook, Hotmail, and up till recently Outlook.com. It also worked fine on ol/ul tags, as well as margin-left on ol/ul tags.

    It doesn’t, however, work on other elements very well.  Knowing where things work and how to use them is a part of any coders job, and they shouldn’t be “shamed” for using what has worked.

  • BenM
    7th February

    With outlook.com and outlook 2013, all models I realized recently are broken. I had to rework everything (except for 2013 because nobody uses it yet): no more margin and padding, and line-height only for progressive enhancement. Microsoft does with its mail clients, it has done so with IE10 browsers: sh*t !

  • Kristy Ewing
    16th February

    Are email designs generated with Campaign Monitor’s template builder impacted?

  • Ros Hodgekiss
    16th February

    Kristy, we’ve taken a look at templates from our builder and they’ve held up well. You can view a very basic test I performed just earlier.

  • Aaron
    21st February

    I hope Yahoo!, Google and Microsoft read this… Seeing as they are the only companies that matter when it comes to E-Mail clients.

    Stop using your built-in piece of junk code to render our HTML E-Mails. Let the browsers render them… Microsoft, quit using Microsoft Word or some variant of Microsoft Word to render our e-mails. Microsoft is obviously a hot mess and wasn’t meant to render HTML. At least, for your sake use a variation of Internet Explorer’s rendering engine to render out HTML e-mails.

    Google, use the Webkit rendering engine, instead of your built in crap.

    Yahoo! Follow the Webkit lead.

    These companies are expecting plain-text e-mails, which is fine when it comes to direct communication. But, I think we all would rather see some progress being made in this field, instead of taking steps back like Outlook.com.

    Microsoft, I like you, but this little stunt you pulled just set yourself up for a lot more hate than the Outlook client brought you.

    Thanks.

  • Patrick McKern
    22nd February

    Folks, one thing I have not seen here, as far as I can tell, is a solution that will work for non-coding clients using a template that we’ve built for them. Margins on paragraphs allows paragraph spacing that carries over to each new paragraph created with a hard return within the editor. Do any of these other solutions do that? As far as I can tell, they do not, and the only workaround I can imagine at the moment is to make single-paragraph layouts within the repeaters, forcing the user to insert a new layout unit for every paragraph. So not impressive.

  • Joshua Blackwood
    22nd February

    Thanks for this article! It looks like I’ll be revisiting some of our organization’s most popular email templates . . . I tend to use margin only for small styling purposes, since support for margin-top in Hotmail and certain elements within Outlook 2007-2010 has always been lacking, but still. This is retarded, Microsoft.

  • Abby Larsen
    22nd February

    That awful thought had occurred to me, too, Patrick. Single paragraph layouts will be a very awkward sell to clients who need to manage their own email content and want to include more than just story teasers and links in their messages.

  • Juan Ignacio Lacueva
    22nd February

    I think the Email Standards Project should take an aggressive approach to press Gmail, Hotmail and Yahoo to make email CSS more standard and complaint, if not email marketing will always be like struggling to IE6 constantly

  • Jonathan Nicol
    22nd February

    @Patrick As far as I can tell, Outlook.com does still apply margins between paragraphs automatically. The problem, I think, is with margins you’ve explicitly set on elements using CSS will be stripped. Just leave your paragraphs alone and they should render as expected.

    Like you, I did a double take when I read this article, but testing a client’s template in Outlook.com reassured me that paragraph spacing was indeed retained. MS are short sighted, but I don’t think they are suicidal!

  • Dee McGrath
    24th February

    Sigh. Some standards would be nice.
    Great work Microsoft.

  • Nathaniel Flick
    25th February

    Use table rows and columns for your spacing, not margin or padding. There are plenty of other clients out there that render these things very differently; take control by defaulting to Netscape 3 style html font tags too.

    I too have to say wtf Outlook, why go backwards?

  • Albert
    7th April

    Software = politics!

  • Katrina
    17th May

    I downloaded one of the free templates from CM that is responsive, but it won’t even load at all in outlook/hotmail.

    Ideas?

  • Ros Hodgekiss
    18th May

    Hi Katrina, thank you so much for your message on our Facebook page, too. Just to reiterate what we said there, so far, we believe Outlook is taking issue with our ‘Simple Announcement’ template. If you are having issues with a different template, please let us know.

    We are planning to update our templates in the coming days to fix this issue. In the interim, you can fix this yourself by exporting the created template, then finding and removing the <code _tmplitem=“635” > tag from the HTML email code. Once done, simply ‘Update’ the template and all should be well.

    Sorry about this trouble, if there’s anything else we can do to assist, don’t hesitate to let us know about it.

  • Joan
    24th May

    Go figure, I though I was doing something wrong on my email. turns out it decided to DELETE any instance of FLOAT from the body..!!!

    Dear microsoft, sincerly, WTFK ??

    The rest of the world.

  • Chris Satchell
    27th June

    How to specifically target Outlook.com in your HTML emails.

    Add an id to any tag. Naming the id is key, where you should avoid using an actual word such as “FIX” or “Outlook”. My tests included using “FFFOOO” or “BBBOOO” as my id’s.
    Next, I used Thunderbird to send the HTML email to my outlook.com account. After sending the email, inspect the HTML directly using web inspector or firebug and locate your id. If all goes accordingly, outlook.com will modify your id to something like “ecxFFFOOO”. Once you have this confirmed, then you can add your outlook.com specific CSS rule to the HEAD of your HTML file:

    <head>
      <style type=“text/css”>
       
        #ecxFFFOOO {
            height: 20px
        }
     
      </style>
    </head>

    It worked for me. Hopefully this helps you get some sleep.

  • Ros Hodgekiss
    27th June

    Hi Chris, thank you so much for sharing this! We’ve seen similar fixes previously using #ecx… so good to know these old techniques have new applications now. Keep sharing your findings!

  • Gilberto Paulo
    3rd October

    The work around I have seen through email I receive is to use a plain image instead of a HTML code. I really don’t like this solution. So if you are sending images for me to read a text, then you are not reaching me. But why would you do that if other email clients like Thunderbird can interpret HTML very well? So it is like the IE6 ban. Just ignore Outlook email client and let the market do the move forward something that is better developed!

  • michaël Luis
    24th October

    arrrrgg !!
    Like I know that it is very hard to have a universale html template, I have created a template just using tables, and tables in tables, and tables…
    I have pictures on the external <td> of my table to create a nice design, heights and widthes are calculated with precision of pixel.
    Everything seems to be good, I just use a <style> to force some css on mail clients.

    I not use and directly put my text into <td> but when I test it on outlook.com it add around my text with a margin-bottom of 1.35em

    Now my design is corrupted and not nice anymore.

    No support for margin : ok but WHY ADD SOME ON CLEAN TEXT IN CLEAN <td> ?? it is just insane, td is already a container…

    tonight I will prey for standardisation of html support by mail clients.

  • michaël Luis
    24th October

    sorry for double post but if my last post seems incoherent sometimes, it was some p balise which has been cutted on posting

  • Dianne
    1st November

    I was able to hack a “float” by first defining a div container width forcing anything within the container to break once the width is filled. Within the container I then set-up child divs and set their styles’ to display: inline;.

    This way they align next to each other but then automatically break at the container width. I hope that helps!

    I tested in outlook and it actually rendered.

  • Wiktor
    15th March

    I know it’s a hack, but it seems if I write Margin and Float (with uppercase first letter) instead of margin and float, it works. :)

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account