Simple Email Marketing
Home > Resource Center > Account how-to > Padding, margins and email width

Padding, margins and email width

When using the editor, we've taken care of things like image padding and mailing margins. However, if you're coding your own mailing from scratch, you'll need to apply widths to your content areas by following these instructions.

How to create padding and margins

If you neglect to add padding or margins to your layout, your text and images will run into each other:


 

There are a few ways to write your code so this doesn't happen. If you're working at a <td> level, we recommend using style padding, like so:

<td style="padding:5px;">

If you're working within <div> tags, it's better to use margins:

<div style="margin:5px;">

However, we don't recommend using the padding attribute in <div> tags, because they will be stripped from Outlook 2007 and 2010.

Let's imagine you'd like to pad the above image box, and you want different padding on the right side and on the bottom. This could be done like so:

For padding, try: <td style="padding-left:0px; padding-top: 0px; padding-right:20px; padding-bottom:10px;">

For margins, try: <div style="margin-left:0px; margin-top: 0px; margin-right:20px; margin-bottom:10px;">

It will turn out like this:


 

Check out this sample code for a wrapping text box like the one above ...

1. Using <div> style margins:


 

2. Using <td> style padding:

How to assign an email width

Remember to assign width to your content areas. If you miss this step, your email's width could vary greatly from email client to email client, based on the amount of content you place in each column.

If you want the columns to be equally weighted, you would assign a column width of 50% to each, like so:


 

And it turns out looking like this:

You must to post a comment.
Last modified
11:09, 26 Jan 2015

Tags

Classifications

This page has no classifications.