Spacer GIF vs. table cell padding vs. table cell with height

It's 2020 but it still feels like is 1996 when it comes to email development. One of the classic examples is using images to keep spacing vertically or horizontally. It's odd but it works. Let's chat about the advantages and disadvantages of each of the three methods, here some of my thoughts and reasoning of why using one over the others:

Spacer GIFs

I started using spacer GIFs when I started coding email newsletters and I never stopped doing it. Even now is still one of my favorite methods. It's bulletproof and I know I can rely on it no matter what. So that is an advantage. However it could get the code a bit crowded to have these spacer GIFs inserted wherever I need a space. If you have a long newsletter it could be better to look at the other two methods but none the less, I believe it's the best way to go yet.

It requires you to upload the spacer image into your email ESP in order to be able to use the image path in your code. If you do freelance work you might not have that option. I once created a transparent GIF, which I keep using ever since, with 1px width and 1px height and I change the height or weight as I wish depending on how much space do I need.

The code will look like this:

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border-collapse:collapse" width="20"><img src="https://emailsnob.com/spacer.gif" alt=""  width="20" height="20" /></td>
    <td style="border-collapse:collapse">Your email here</td>
    <td style="border-collapse:collapse" width="20"><img src="https://emailsnob.com/spacer.gif" alt=""  width="20" height="20" /></td>
  </tr>
</table>

As you could see, I would also put width="20" on those 2 table columns for extra precaution. 

Table cell padding

Number two in my favorites is using table cell padding. It works well usually but you might still encounter some weird things happening in some obscure email clients (take that Note!). The code is simple, no comments needed. Use it as you wish but don't forget to always check how your emails render either in Litmus or Email on Acid.

The only drawback is when using padding to add spacing left and right for your emails. It doesn't work for me as the padding is increasing the width of the email, so if the email will be 100% of the display usually, it will become 110% or whatever percent it's being added. It's lame but I couldn't find any workaround it.

The code will look like this:

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border-collapse:collapse; padding-left:20px; padding-right:20px;">Your email here</td>
  </tr>
</table>

Table cell with height

This of course could be used for vertical but horizonal spacing as any of the methods I mention - just don't forget to adjust your code. Requires a little more coding but is working great as well:

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20" style="border-collapse:collapse; font-family:Arial,sans-serif;height:20px;font-size:20px;line-height:20px;mso-line-height-rule:exactly"></td>
    <td style="border-collapse:collapse; font-family:Arial,sans-serif;height:20px;font-size:20px;line-height:20px;mso-line-height-rule:exactly">Your email here</td>
    <td width="20" style="border-collapse:collapse; font-family:Arial,sans-serif;height:20px;font-size:20px;line-height:20px;mso-line-height-rule:exactly"></td>
  </tr>
</table>

As you could see, I try to be as specific adding width and height on the table cells too. I also avoid CSS shorthand so instead of padding: 0 20px; I prefer using padding-left:20px; and coding-right:20px; just so I don't run into issues. 

style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; on tables and style="border-collapse:collapse" on TDs are great to have for Outlook. It prevents Outlook for adding extra space around tables and table cells and you also shouldn't have issues with those lines are sometimes appear randomly in emails in Outlook email clients.

As always, when it comes to coding, especially email newsletters, it could be tricky but I hope this article shed some light and gave you more options for coding spacing into your emails.

The times are uncertain with this covid-19 situation. Stay well and take the work-from-home time as a great occasion to polish your email development skills. Till next time, all the best from your email snob.