Whats the best solution to create spacing in an Email?

More often that not when I'm working on an email using some random template I receive from a client, I see different techniques for creating spacing between blocks of text and objects in an email.

Some us CSS padding and margin settings. Some use tables with heights set with spacer.gifs etc. Some just us <P> tags.

My experience that using padding and margin is mixed especially in Outlook. Using stand alone tables works but I found for some reason in outlook it will make transparent gifs visible by making them gray if you have a height set on the gif.  <P> tags are not consistent across email clients either.

So what is a poor soul to do? What do you do?

BThies BThies, 6 years ago

I use nested table cells to create horizontal spacing, and <div>'s to create vertical spacing. (set the line-height in the <div>, and the vertical space is based on that line-height.)

Tables and <div>'s are the absolute most reliable spacing you can provide.

I use <div>'s for not only spacing, but also for all text formatting and line spacing (I only use <p>'s for CM's description tag requirement).  Yes, its a bit more code, but copy and paste works quite well.  :-)
-------------------------------------------------------------

In addition, I place <font> tags outside the <div>'s for Outlook Web Access support. (OWA doesn't support style tags).  Any browsers that don't recognize styles will default to the <font> tag settings.

To keep vertical spacing as consistent as possible, I use the following conversion table for styles to <font>:

4px - 10px :  size="1"
11px - 13px : size="2"
14px - 16px : size="3"
17px - 21px : size="4"
22px - 29px : size="5"
30px - 36px : size="6"
36px+ : size="7"


Brian Thies
Professional Email Developer
Thies Publishing
biaj, 6 years ago

Got any code samples?

BThies BThies, 6 years ago

Simple sample:

<table width="100" cellpadding="0" cellspacing="0" border="0">
   <tr>
      <td width="10">&nbsp;</td>
      <td width="80">
            <font size="2" face="Arial,sans-serif" color="#000000">
               <div style="font-size:12px; line-height:15px;">&nbsp;</div>
               <div align="left" style="font-size:12px; line-height:15px; font-family:Arial,sans-serif; color:#000000;">Text between line spaces</div>
               <div style="font-size:12px; line-height:15px;">&nbsp;</div> 
               <div align="left" style="font-size:12px; line-height:15px; font-family:Arial,sans-serif; color:#000000;">More text between line spaces</div>
               <div style="font-size:12px; line-height:15px;">&nbsp;</div>
           </font> 
           <font size="1"><div style="font-size:8px; line-height:11px;">&nbsp;</div></font>
      </td>
      <td width="10">&nbsp;</td>
   </tr>
</table>

Brian Thies
Professional Email Developer
Thies Publishing
zapatoche, 4 years ago

I just tried that to replace a spacer.gif pattern on a layout. I have a strange problem. when I build the email, it works fine. But when we run test form our template builder (not CM) the transparent gifs shows up almost everywhere.

This technique works really well but for hotmail on explorer where the divs are squashed. Do you have the same issue?

Cheers

Alex I., 4 years ago

Post your code, lets take a look at it!

roshodgekiss roshodgekiss, 4 years ago

Second to Alex, a screenshot would be great, too. If you're using another service's template builder, there's a chance that it may be adding some additional code, so it's worth keeping that in mind, too.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
juloxy, 4 years ago

hi biaj,

the best way to create spacing in email is to use empty <td>.
It's a boring way, but it's very difficult to use <div> with css and have a homogeneous result on the different webmails of software...

And a screenshot would be great :)

Juloxy

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