Update on Spacing: Transparent gif, empty td cells, divs ?

Hi,

I'm sure this subject has been done to death on these forums, but I'm struggling to find a definitive answer to the problem of how to code spacing within emails which has consistent results across 'all' email clients.  When I say all, this has to include Lotus notes.  There may be different solutions for horizontal and vertical spacing, but it seems there are many ways to skin this cat...

The different options include (for adding 10pixel spacing to a text column of 250 width):

td with empty content (or  ), but with a width stipulation (my current preferred solution)
<td width="10">&nbsp;</td>
<td width="250">Text content with left padding</td>

td with padding
<td style="padding-left:10px;" width="250">Text content with left padding</td>

td with padding applied to <p> tag
<td width="260"><p  style="padding-left:10px;">Text content with left padding</p></td>

td with image spacer
<td width="10"><img src="transparent.gif" width="10"></td>
<td width="250">Text content with left padding</td>

And then of course there's adding padding to the height:

tr with empty content (or &nbsp;), but with a height stipulation (my current preferred solution).
<tr><td height="10">&nbsp;</td></tr>
<tr><td width="250">Text content with top padding</td></tr>

td with padding
<td style="padding-top:10px;" width="250">Text content with top padding</td>

td with padding applied to <p> tag
<td width="250"><p  style="padding-top:10px;">Text content with top padding</p></td>

td with image spacer
<tr><td height="10"><img src="transparent.gif" width="10"></td></tr>
<tr><td width="250">Text content with top padding</td></tr>

The above examples refer to spacing inbetween text.  Though the solution should also be able to be applied to spacing between any element (images etc).

Looking forward to seeing your opinions,
Tony

JohnP JohnP, 3 years ago

I have the same method as your preferred method (using a &nbsp row/cell) - it is most consistent. I don't use p tags at all as they can be inconsistent themselves, and recently I've been using padding but had some issues with the cells in stacked tables not lining up perfectly.

I also don't shy away from colspans and rowspans (unlike most people), because, assuming you get them right, the email holds together better with the Outlook Mso-normal issue. (Subsequent rows create an unwanted margin of a few pixels, while tables create 15ish pixel gaps when you forward from Outlook to say, Gmail.)

jeremypeter, 3 years ago

I've found using padding on the table cells to be consistent for me. I've created a boilerplate which contains class selectors that mimic common block level elements. So to create a paragraph all I would do is, <td class="p">. Then the p selector would have padding top and bottom of 10px.

It works for me in the following clients:
Outlook 2000+
Yahoo!
Hotmail
AOL
Gmail
Lotus Notes 8+
Apple Mail 4+
Outlook.com
Thunderbird 3.0+

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098