Support
 
 
 
Share/Save/Bookmark

Emailology: Outlook.com Margin-alizes CSS Properties

Posted January 21, 2013 by Geoff Phillips

Outlook.com and Hotmail Allow No Margins (for Error)

It's always a challenge to create emails that will look good in every client, and it may have just gotten a little bit harder. Outlook.com has discontinued support for:

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

In the past, Outlook.com has not supported the margin and margin-top properties, but discontinuing all margins is new.

Enforced Styles

Hotmail and Outlook.com enforce their own embedded styles on headings and paragraphs. Then they proceed to strip yours out. Hotmail's enforced attributes look like this:

h1, h2, h3, h4, h5, h6 {
margin: 0 0 5px 0;
}

p {
margin: 0 0 1.35em 0;
}

The email client srips every instance of the margin property (server side), so unfortunately this issue plagues all web browsers.

Working Without Margins

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. If you find another work-around or a fix, please let us know in the comments down below!

Comments

Alex
Alex
If you use a span tag instead of a p tag and set margin-top:#; margin-bottom:#; this will resolve it.
Posted 01/24/2013

Jeff
Jeff
It's not just the margin properties. From what I can tell, float is out too, as is the img align attribute.
Posted 01/24/2013

AWE
AWE
Anyone have an issue with the margins when just writing or receiving emails. It doesn't happen with all emails.

Some of my emails I send to friends are received with what seems like a negative left margin. Parts of words and letters are cut off.

This also happens with some emails I receive. The margin seems to be negative value.
Posted 05/08/2013

Share Your Comment

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below: