Margins and Padding in Email

Tips for Margins and HTML Email Padding

Margins and HTML email padding go a long way to ensure a smooth user experience within an email. They allow different creative elements and email content to breathe and flow seamlessly, without making the message feel too cramped. 

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


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.

Padding around content in a table data 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 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.

Margins around table data cells in email

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.

Fred from Scooby Doo cracks the case of the email padding issues. Their perp? Outlook.

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;

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;}

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.

This post was updated on September 9, 2022. It was also updated in August 2019 and originally published in March 2011.

Don’t guess, test

Email clients are constantly changing, which is why it’s important to test your email every time; what worked yesterday might not work today. Sinch Email on Acid offers unlimited email testing in major mailbox providers and the most popular devices. Test 100+ options as much as you want – there’s no limit. That means you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.

Test Today