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.