7 Tips Regarding Margins and HTML Padding in 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:

p {margin:0 0 1.35em;}

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:

<style type="text/css">
p {margin-bottom:0; margin:0}
</style>

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: https://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.

Author: Alex Ilhan

7 thoughts on “7 Tips Regarding Margins and HTML Padding in Emails”

  1. Hi,

    I am using mailinator for email template testing. It is not showing the padding and margin attribute of style in table. Please provide me the solution for this.

  2. Even when i inline margin for paragraph it gets cut off. Gmail keeps adding its own margins to paragraphs. Anyone got other tips?

  3. My quick fix for now is using images as spacers and use
    the breadlines. That was the best I could come up with. I’m no coder so for me love is new.

  4. I apply line-height and margin-bottom property in email template but not working in gmail testing line-height does not work correctly so let me know how to fix this issue thanks

  5. Right here is an offer where you could go into to win an Apple Watch. This is mosting likely to be the base model one they hand out, the Apple WatchSport with a value of $349! Terrific chance to win this prior to you could acquire it!

    Answer the concern currently for a chance to win.
    Click on this link: http://ow.ly/f8Sy308eRBs

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies