Spacing Techniques in HTML Email
By Alex Ilhan
Senior Email Developer, Email on Acid
Creating spacing in HTML emails has always been a surprisingly tricky topic. What should be a simple task is made infinitely more complex by the lack of email client standards. You’ll also find that all email developers have their own little tricks to creating space. In this post we’ll have a look at some of the most popular methods for creating spacing, the pros and cons of these methods, and the email client support.
As with any new coding technique, it’s important to preview your email first to ensure it’s rendering right on all the different email clients and devices. Email on Acid lets you test your email code across 70+ mobile, web and desktop apps and you can get started today for free.
The cellpadding HTML attribute specifies the space, in pixels, between the cell wall and the cell content. We apply it by adding it to our tables with HTML:
The biggest advantage to using cellpadding is the support; most email clients support HTML tables. That means any email client that supports table will also support the cellpadding function.
The main issue with using cellpadding is the lack of ability to override it. When using heights, padding, or any CSS code we can override it with media queries. With cellpadding, we don’t have the ability to do that because it’s an HTML attribute, not CSS.
Where I Use Cellpadding
I often use cellpadding in my email code. I tend to use it in places I know I will not need to change the cellpadding for different email clients or devices. For example, adding a guttering around an entire email container.
When I use the term empty cells, I’m referring to empty <tds> that we can add to our code to force spacing around content. For example, this is how you would use it to add the 20px spacing we’ve been using in this post.
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" height="20"></td> </tr> <tr> <td width="20"></td> <td align="left" style="font-size:16px; color:#000001; font-family:serif;"> Content goes here </td> <td width="20"></td> </tr> <tr> <td colspan="3" height="20"></td> </tr> </table>
The biggest issue with this spacing method compared to other methods is that it doesn’t always work. As we explain in this blog post, empty table cells don’t always retain their height.
Another problem is the amount of code to write. Rather than specifying one bit of HTML or CSS, we must code an entire table structure. Another consideration is mobile optimization; to create this as a mobile email, you must either hide the cells completely or make new classes to control the width and height of these spacing cells. Both methods require media query support. The final mark against this method the fact that it requires exact pixel widths, which means it’s not suitable for fluid-hybrid emails.
Where I Use Empty Cells
I do not use empty cells unless I’m forcing height between table cells. The reason is that I likely won’t need to change a 20-pixel height divider. You can read more about using empty cells here.
One of the simplest ways to add space is the line break:
<img src="https://placehold.it/600x150" style="display:block;" border="0"> <br><br> Content goes here
As we show above, you must add breaks inside of the content HTML. Unfortunately, this method is largely unused except for when adding spacing between text or forcing line returns in your content. Various email clients are known to read the line breaks at a different height, making it virtually impossible to create a pixel-perfect HTML email.
Where I Use Breaks
I only use breaks to break copy (text) in the email content, I do not use it to force spacing in other places.
Part of the CSS box model, padding is a common method used in web development to create space, and it’s often used in email development, too. In the past, padding has been a big headache for email developers. However, we’ve seen in recent years that companies are consolidating their email efforts, such as Microsoft switching the Outlook.com rendering engine to the Office 365 rendering engine. This opens the door for developers to revisit padding.
Above, you can see how simple it is to implement; it’s a small bit of inline CSS. The big advantage is the ability to override this in the head of the email. For example, we could use media queries to switch 30-pixel padding on desktop to 10-pixel padding on mobile to take up less screen real estate. With Gmail’s support for media queries, this is a big plus.
On the other side of the coin, there are a few considerations when using padding in HTML email. It’s best to stick to using padding on table cells, rather than on tables, for ease of use and troubleshooting. Outlook has also been known to throw a bit of a tantrum when using padding on paragraph, div or anchor tags.
Where I Use Padding
I use padding anywhere I need to add space that could change dynamically. For me, it comes down to a choice of using padding and cellpadding to force spacing.
Margin is another part of the CSS box model and is a common method used in web development to add spacing. This is how you would use margins in email development:
Margin works by adding spacing outside of the border in a CSS box model, compared to padding which will add it inside the border. Historically, margins have always been tricky. But, much like padding, the efforts by email companies to modernize their rendering engines could lead to a resurgence of margin in email.
Where I Use Margin
I do not use margins, but if you do use them in your emails please let me know in the comments section below!
How Do You Create Spacing in HTML Emails?
The email development process is an ever-evolving beast; if we don’t review what we do and why we do it, we run the risk of our process becoming archaic. When I started developing emails, I only used empty cells to control spacing. I did this simply because I didn’t realize there were better methods. How do you control spacing? Do you use a mashup of methods or do you stick specifically to one method? Let us know in the comments section below or hit us up on Facebook or Twitter.
Spacing Issue or Not – Don’t Forget to Test!
These workarounds may help you fix some spacing problems, but even the slightest code change could throw off an entire email design. That’s why it’s important to test every email every time. With Email on Acid, you can preview your design on more than 70 clients and devices, so you know how your email will look before it hits the inbox. Try us free for seven days and see for yourself.
Editor’s note: This blog post was updated on August 16, 2018. It was originally published in October 2016.
Author: Alex Ilhan
Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.