How to fix unwanted spacing in email newsletters - now, give me some space

Unwanted spacing in email newsletters is always happening and sometimes it's just too much struggle to find a fix sometimes. But don't pull your hair yet. Let's look at a couple of real world case scenarios and how I deal with them.

What we commonly refer to as spacing could be padding or could be margins or sometimes both. It could also be that we need to fix the line height which is increased in Outlook for example.

One common fix I found for all spacing related issues is adding a reset in the CSS for all elements in the email. Something like this:

* {padding:0 !important; padding:0 !important}

Also being very specific and using pixels could help as well.

<td style="line-height:14px; font-size:14px;">Some awesome text here</td>

This will force Outlook but other email clients as well to use line-height of 14px. Another way to fix line height is by reseting it to default which is 142%. So writing something like this to target Outlook could help if your issue is Outlook Mail:

.ExternalClass, .ExternalClass * {line-height: 142%!important}

So what you can do is modifying my previous CSS reset to:

* {padding:0 !important; padding:0 !important; line-height: 142%!important}

For email clients that are stripping down the head style (i.e. Gmail) we can also add the style inline on every table cell containing text, something like this:

<td style="padding:0 !important; padding:0 !important; line-height: 142%!important"></td>

One issue I keep encountering is that every time I wanted a space smaller than 17px, Outlook will bring it up to 17 no matter what. One example would be, I want only 5 pixels between two horizontal panels.

The way I fixed it was by adding height on the container table and on a new wrapper div for the spacer image itself. Here is a sample code:

<tr>
   <td border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; font-size:0; line-height:0" bgcolor="#0079c1" width="100%" height="5">
      <div style="height:5px;"><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat3.jpg" width="10" height="5" alt=""/></div>
   </td>
</tr>

Talking about spacing in emails, I kept avoiding using padding for years because I've seen discrepancies in the way various email clients treat padding. However over the past year or so I started using it and I've gotta say, I'm yet to encounter an issue. It looks like the bugs got sorted out with the troublesome email emails. However I think I cleaner solution is to have a specific height on a table cell. I know is not complaint but who really cares as long as the client and / or your boss are satisfied with your work. 

So a simple workaround if you want to control the height of a table row could be this:

<td style="line-height:14px; font-size:14px;" height="20">Some awesome text here</td>

This summarizes for now but I always close a blog post with the feeling that I left something out. So watch out, I might come back with more on this subject of spacing in emails.

Till then, happy email coding! Your friend, the email snob.