Home Resources Blog

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.

  • Mathias

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

    But, on a more serious note, WTFF?

  • Justin

    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

    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

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

  • John

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

  • Julie

    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.

    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

    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

    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

    The main problem is that it’s setting the margins on

    We found that by switching all the

    tags to 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 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

    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

    What’s CSS?

  • Ronni DC

    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

    I’ve been switching out all my

    s for 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

    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

    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?

  • Mark

    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>

  • Matt

    Arrrggghhhh! I’ve already wasted enough of my life hacking to get stuff rendering right in Microsoft products.

  • Brian Thies

    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

    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

    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

    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

    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

    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

    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

    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

    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

    I’m in awe.

  • Matteo Capucci

    Why they hate us?

  • deborah

    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

    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

    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

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

  • Ros Hodgekiss

    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

    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.


  • Patrick McKern

    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

    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

    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

    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

    @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

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

  • Nathaniel Flick

    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

    Software = politics!

  • Katrina

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


  • Ros Hodgekiss

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

    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

    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:

    <style type=”text/css”>

    #ecxFFFOOO &#123
    height: 20px


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

  • Ros Hodgekiss

    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

    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

    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

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

  • Dianne

    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

    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. :)

  • softsunrise

    I can control the whole using the float

  • ben

    microsoft is forever a mega-wtf pain in the ass.
    damn it, not an expert, but always done email once in a while… is the 2013 version and outlook.com worst thant any other previous versions ? Go to hell

  • metaladdict

    Currently working on an emailing:
    outlook.com removes margin
    – oulook 2007 client ignores padding

    Thank you Microsoft…

  • dinesh

    float padding margin not working in outlook so how change image align in outlook

  • Ros Hodgekiss

    Hi there dinesh, have you tried using the align HTML attribute? This is the most reliable way to align an image and works in pretty much every email client.

  • Mafalda Sequeira

    For my spacers, that had margins, I substituted by borders with the same color as the background:

    .spacer&#123height: 1px; margin-top: 80px;&#125

    .spacer&#123height:1px; border-top: 80px solid #f2f2f2;&#125

    It works well in all major email clients except Outlook 2007 and 2010, that reduce the borders width. The downside is that you can’t use it if you have a background image.

  • Richard Carroll

    Contact us at Hotmail Help Phone Number Australia if you need any sort of help, call on our Hotmail support phone number Australia for the assistance.

  • Sampson Simpson

    pretty sure Margin is supported with a capital ‘M’

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free