Margins and Padding in Email

Tips for Margins and HTML Email Padding

6

This post was updated on August 7, 2019. It was originally published in March, 2011.

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 crammed. 

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

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

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. Email on Acid offers unlimited email testing on more than 90 clients and devices, so 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

Author: Melissa Berdine

Venturing from her DC and NYC roots, Melissa made the trek to Denver. With just her dog and a background of copywriting and editing, she joined Email on Acid as content manager. Melissa is known to friends as an avid cook and music festival enthusiast.

Author: Melissa Berdine

Venturing from her DC and NYC roots, Melissa made the trek to Denver. With just her dog and a background of copywriting and editing, she joined Email on Acid as content manager. Melissa is known to friends as an avid cook and music festival enthusiast.

6 thoughts on “Tips for Margins and HTML Email Padding”

  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

Leave a Reply

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

Free Email Goodies