Browse by...
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.

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.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free