CATEGORY: Help ArticlesDesignsFAQs

Where has my padding gone?

I’m sure we all want that comfortable, roomy spacing around our text (and images, used carefully!), to make sure our emails don’t look like a 1994 webpage. We can use padding for that, right? Indeed, but margins come into the mix as well. Let’s discuss...

Padding

In HTML tables, you can use the cellpadding attribute (as part of the table tag, please) to define the space in pixels between the table’s TD data cell wall, and what’s inside. For example (experts only, please!)

<table border=”0” cellpadding=”5” cellspacing=”0” width=”600”>
<tr><td>content</td><td>content</td><td>content</td></tr>
</table>

This will put 5 pixels of padding around the top, right, bottom and left of each data cell. In HTML and CSS development, always think about padding and margins in the sequence (see more below).

A more generally accepted way of achieving this, in the realm of emails, though, is to use the styleattribute in each TD tag, to achieve exactly the result you are expecting per data cell (plus, doing it this way allows you to change the padding using media queries, for responsive emails, whereas the solution above does not allow overriding):

<td width=”300” align=”left” valign=”top” style=”padding:5px;”>

This will achieve the same 5 pixels of padding, constrained to just that data cell. If you want to mix it up a bit, you could, for example, specify:

<td width=”300” align=”left” valign=”top” style=”padding:5px 10px 20px 10px;”>

This will put the following pixel padding around the data cell:
Top: 5
Right: 10
Bottom: 20
Left: 10

Margins

Where padding affects space inside the data cell wall, margins affect space outside of the cell wall:

 

<td width=”300” align=”left” valign=”top” style=”padding:5px; margin:5px;”>

So, you’ve set up all of your padding (stick to padding: margins in emails are best for DIVs, and Outlook on Windows doesn’t support these, so avoid until such time as Microsoft finally decides to stop converting HTML to VML and generally rendering HTML emails in a non-compliant way).

However, in (yes) Outlook on Windows, the bottom padding has suddenly disappeared (or some other spurious behaviour)! If a significant number of your subscribers use Outlook (e-shot has wonderful reporting that will quickly and graphically tell you if they do), then you will need to find a workaround for this, such as adding an extra table row to your table, with data cell(s) inside to dictate the height (try adding a spacer GIF there to make sure the height you want to set, really is respected).

As always, test, test and test again!

Images have double the padding/margins they are representing, for clarity of illustration.