Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Creating spacing in HTML emails has always been a surprisingly tricky topic. What should be a simple task becomes infinitely more complex due to the lack of email client standards.
You'll also find that all email developers have their own little tricks to free up space. In this post, we'll take a look at some of the most popular methods for fixing spacing issues in HTML emails. We'll also explore the pros and cons of these methods and discuss email client support for various spacing techniques.
The HTML attribute “cellpadding” specifies the distance in pixels between the cell wall and the cell content. We apply it by adding it to our tables using HTML:
The biggest advantage of using Cellpadding is the support; Most email clients support HTML tables. That means any email client that supports it
will also support cell padding function.
The main disadvantage of using Cellpadding when encoding email is that it cannot be overwritten. If we use heights, padding or any other CSS code, we can override it with media queries. This is not possible with cell padding because it is an HTML attribute and not CSS.
When to Use Cellpadding in Email
I often use cellpadding in my email code. I typically use it in places where I know I won't need to change the cell layout for different email clients or devices. For example, add a gutter around an entire email container.
Empty cells
When I use the term “blank cells” I mean empty cells that we can add to the HTML email code to force spacing around the content.
For example, here's how you would use it to add the 20 pixel padding we used in this post:
The biggest problem with this email spacing technique compared to other methods is that it doesn't always work. Unfortunately, empty table cells in HTML emails do not always retain their height. So if you use this spacing technique, make sure you preview the email in a variety of important clients.
Another problem is the amount of code you have to write. Instead of specifying a bit of HTML or CSS, you have to code an entire table structure.
Another consideration is mobile optimization. To create this as a mobile email, you will either need to hide the cells completely or create new classes to control the width and height of these spacer cells. Both methods require support for media queries. The final criticism of this method is the fact that it requires exact pixel widths, meaning it is not suitable for fluid hybrid emails.
When to use blank cells in emails
Due to various disadvantages, we recommend avoiding using blank cells in email code unless you enforce the height between table cells.
Instead, we recommend using cell height and/or width values or colspan, rowspan and padding instead of empty cells. As long as you don't use borders, this should help you achieve identical layouts across browsers.
Line breaks
One of the easiest ways to add space in an HTML email is to wrap lines:
The content goes here
As we show above, you need to insert breaks within the content HTML. Unfortunately, this method is largely unused except when adding spacing between text or forcing line breaks in your content. Different email clients are known to read the line breaks at a different height, making it virtually impossible to create a pixel-perfect HTML email.
When are line breaks used in emails?
The most useful place to use line breaks as an email spacing solution is between text. In other situations, we would not recommend using this to enforce distance.
CSS padding property
As part of the CSS box model, padding is a common method in web development to create space and is also commonly used in email development.
The CSS box model includes the border and border, which we will discuss next. This is how the model is structured:
In the past, padding was a major headache for email developers. Outlook has also been known to throw a tantrum when padding is used on paragraphs, divs, or anchor tags.
However, the situation is not quite as frustrating since Microsoft switched the Outlook.com rendering engine to the Office 365 rendering engine. This opens up the opportunity for developers to reconsider padding with CSS to address spacing issues.
style=”padding:20px;”
Above you can see how easy it is to implement. It's a small piece of inline CSS. The big advantage is the ability to overwrite this in the header of the email. For example, we could use media queries to switch from 30 pixel spacing on desktop to 10 pixel spacing on mobile to take up less screen space.
On the other hand, there are some considerations when using padding in HTML emails. For ease of use and troubleshooting, it is best to limit padding to table cells rather than tables.
When should CSS padding be used in emails?
Try to use padding anywhere you need space that could change dynamically. For me it often comes down to choosing between using padding and cell padding to enforce spacing.
According to Can I Email, desktop versions of Outlook are the main clients without support for the padding property.
CSS margin property
The margin is another part of the CSS box model and a common way in web development to add spacing. Here's how you would use margins in email development:
style=”margin:20px;”
Margin works by adding padding outside the border in a CSS box model, as opposed to padding, which adds that padding inside the border.
In the past it was a bit difficult to get the right margins. But similar to padding, email companies' efforts to modernize their rendering engines could lead to a resurgence in HTML email margins.
When should CSS margin be used in emails?
The margin is a good way to add some white space to HTML emails so that they don't look cluttered and crowded.
However, there isn't quite as much support for the margin property as there is for padding with CSS. According to Can I Email, using margins could cause problems in many versions of Outlook. Also note that Gmail does not support margin with negative values.
How do you correct spacing in HTML emails?
The email development process is a constantly evolving beast; If we don't review what we're doing and why we're doing it, we run the risk of our process becoming stale.
When I first started developing emails, I only used blank cells to control spacing. I simply did this because I didn't realize there were better methods.
How do you control the distance? Do you use a method mashup or do you specifically stick to one method? Let us know in the comments section below or contact us on LinkedIn, Facebook or Twitter.
Distance problem or not – don’t forget to test it!
These workarounds can help you fix some spacing issues, but even the smallest code change could mess up an entire email design. That's why it's important to test every email every time.
Email on Acid lets you preview your work across dozens of major email clients and devices. This means you know what your email will look like before it lands in your inbox.
Unlike other platforms, Email on Acid customers enjoy unlimited trials. You will never hit a cap or have to worry about exceeding it. Keep testing and optimizing until you reach email perfection!
This blog post was updated in November 2021. It was also updated in August 2018 and was originally published in October 2016.
We use cookies to optimize your user experience and to send improved content. If you continue to browse our website, you accept these cookies. You can personalize and change your consent choices by returning to this website at any time.
Allow everyone. Disable all
Cookie settings
Your cookie choices
When you visit a website, information may be stored or accessed in your browser, usually in the form of cookies. This information may be about you, your preferences or your device and is used primarily to make the website work as you expect it to. The information does not typically identify you directly, but can provide you with a more personalized web experience. Because we respect your right to privacy, you can choose not to allow certain types of cookies. Click on the different category headings to learn more and change our default settings. However, blocking some types of cookies may impact your experience on the website and the services we offer.
Allow everything
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
