Emailology: 7 Tips and Tricks Regarding Margins and Padding in HTML Emails
Posted March 9, 2011 by Michelle Klann
Hotmail does not support the "margin" nor the "margin-top" CSS properties (both inline and embedded) for any HTML element. Our recommendation is to stick with margin-left, margin-right, and margin-bottom properties.
Hotmail uses the following code in its embedded CSS:
Your email will display within the Hotmail interface so it will take on that style. You can overwrite this in your embedded CSS in order to start with a clean slate for paragraph tags.
In the above example, I included "margin:0" for all other email clients.
Outlook 2007 and 2010 do not support "padding" CSS property in paragraphs. To get the best results across all clients, we suggest a combination of the two previous suggestions. First, include the above embedded CSS and secondly, stick to margin-left, margin-right, and margin-bottom properties for all paragraphs.
Box model padding issues rear their ugly head because several email clients strip your DOCTYPE. If that sounded like Latin to you, here's more information: http://www.emailonacid.com/forum/viewthread/47/.
To fix this, never use padding on a box element for which you have already set a width attribute or property. Nesting tables or paragraphs without widths is the best way to go in order to create an email that renders consistently across all email clients. A good way to make sure you are doing this properly is to test in IE7 and Firefox without a DOCTYPE. When you feel good about your final layout, run an Acid Test to preview it in all email clients.
If you add margin or padding properties to your TABLE element, it will add that same margin and padding to every nested TD in Outlook 2007 and 2010. Cellpadding and cellspacing attributes are safe but it's best to avoid CSS margins and padding within the containing TABLE element.
TD padding is generally safe as long as you are not setting a width property or attribute. Outlook 07 and 2010 will convert your width in pixels to points which doesn't always translate as precisely as you may want. If you need to define and control the width of the TD, there are two ways to overcome this issue:
This, of course makes it difficult to set consistent margins across all browsers. The only obvious fix is to include an inline margin on all paragraphs, ULs, and LIs. For this, you could use our "CSS Conversion" feature which will convert your embedded CSS to inline automatically.