Emailology: 7 Tips and Tricks Regarding Margins and Padding in HTML Emails

1.) Hotmail doesn't support "margin" or "margin-top"

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.

2.) Hotmail's embedded CSS will affect your layout

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.

For example:

In the above example, I included "margin:0" for all other email clients.

3.) Outlook 2007 and 2010 do not support "padding" in paragraphs

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.

4.) Box model padding issues are back

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.

5.) Table element margins and padding in Outlook 2007 and 2010 can cause issues

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.

6.) TD padding is safe but use it with caution

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:

1. You could use a clear gif image (sized to the exact dimensions) within your TD.
2. You could set a width on your containing TD and then use a nested Div, Paragraph, or Table without a width to control the content margins within the TD.

7.) Gmail doesn't support embedded CSS

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.

Tweet