Tips for Margins and HTML Email Padding

So, what’s the difference between margins and padding in an email?

Padding

The <cellpadding> HTML attribute specifies the space, in pixels, between a table data's cell wall, <td>, and the content inside. Say the below image is a single <td> cell. The blue represents the content in that specific cell, and the white space around it indicates the padding in pixels between the content and the edge of the cell.

Since <cellpadding> is an HTML attribute, it can’t be overridden with a CSS media query to optimize for mobile. With that, it’s best to use cellpadding in an email’s code where the spacing won’t need to be adjusted for different screen sizes.

Margins

Margins are a way to create spacing outside of a table cell using CSS style=”margin: 20px;” (or however many pixels you want it to be). They create a space between the content’s cell and either other content elements or the email’s borders.

As you may have guessed, not all email clients and devices have the same standards when it comes to margins and padding. Here are some tips to keep in mind:

Be intentional when selecting a spacing attribute

Not all spacing is created equal in code, especially when it comes to finicky email clients (which we’ll go into later).

Be mindful when choosing between the padding and margin attributes. Each one tends to work better with different content blocks.

For instance, if you’re adding spacing to <div> elements, you’ll have an easier time using margins:

<div style=”margin: 20px;”>

However, adding spacing to a <td> cell can be easily done with padding (but see our word of warning below):

<td style=”padding: 20px;”>

Use <td> padding with caution

<td> padding is generally safe as long as you’re not setting a width property or attribute. Outlook 2007 and 2010 will convert your width 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 do so:

1. Use a clear gif image sized to the exact cell dimensions within your <td>.
2. Set a width on a containing <td> and then use a nested <div>, <p>, or <table> without a width to control the content margins within the <td>.

As always, beware of Outlook

It should come as no surprise that if a healthy number of your subscribers are Outlook users, adjustments must be made to accommodate.

Here are a few tricks to help ensure your HTML email padding plays nicely with this slippery-as-they-come email client:

Outlook doesn’t acknowledge <div>s or their padding attributes

Outlook padding comes with its own set of quirks. One such quirk is that Outlook email clients don’t acknowledge <div> tags, which renders any contained padding specifications worthless. Outlook only respects <table>s, so keep any spacing specifications to those.

If it weren’t for Outlook clients, we could literally use HTML5 for emails. Go figure.

Table element margins and padding in Outlook 2007 through 2016 can cause issues

If you add margin or HTML email padding properties to your <table> element, it will add that same margin and padding to every nested <td> in Outlook 2007 and 2016. Cellpadding and cellspacing attributes are safe but it's best to avoid CSS margins and padding within the containing <table> element.

Similarly, if you’re using CSS, you can add a conditional stylesheet that targets Outlook:

<!--[if mso]>
<style type="text/css">
.tableClass {
margin: 0px 0px 0px 24px !important;

padding: 0px 0px 20px 0px !important;
}
</style>
<![endif]-->

Outlook 2007 and 2010 do not support "padding" in paragraphs

Outlook 2007 and 2010 don't support a "padding" CSS property in paragraphs. To get the best results across all clients, we suggest two things:

1. Embed the CSS:

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

margin:0; will place a margin on all four sides.

2. Stick to margin-left, margin-right, and margin-bottom properties for all paragraphs.

If all else fails, try one of these hacks

While cellpadding is a safe and reliable spacing agent across email clients, it does add padding to all four sides. If spacing is only required on one or a couple sides of an image or container, try some of these other spacing techniques and see what works best.

Once you have it set, run an email test to ensure it renders properly across the clients and devices your subscribers are on.