[This post was originally published on 16th Dec 2021. It has been updated on 28th Nov 2022.]
Email design and coding is a critical task with different email clients rendering emails differently. Creating the right design and coding it the right way is a challenging chore for developers. Adding spaces in HTML email templates that render well across all email clients is a difficult thing to do as there is no standard method to go about it. What works for one email client, device, browser or screen size may not work for another.
Email developers are always trying to find out solutions and apply their own tricks while adding proper email spacing in HTML email. Let us take a look at some popular techniques used by developers. And in case you want to learn how to create an HTML email template, read it here.
1. Using the Cellpadding Attribute
The cellpadding attribute can be used to create spacing between the cell wall and cell content. It specifies the space in pixels and is used with tables in HTML. This function is widely supported across all email clients.
It can be used in the email template HTML code as cellpadding=”value”.
Since it is an HTML attribute and not a CSS code, it lacks the ability to override it unlike overriding CSS codes with media queries. This attribute can be used when there is no need to alter the cellpadding for different devices or email clients.
2. Padding in <style>
The padding attribute facilitates HTML email padding and is widely used in web development. The advantage of using this attribute in email development is its ability to override in the head of the email. With this technique, media queries can be used to switch a 60-pixel padding for desktop to a 20-pixel padding on mobile.
It can be used as style=”padding:valuepx;”.
This method can be used whenever you need dynamic spacing and padding in HTML emails. When it comes to adding spacing, this is considered to be the most simple and effective method.
Download Rate card
3. Empty <tds>
The empty <td> cells can be used to add spacing around the content. This is generally used to force height between table cells. When these tags are left empty, they give rise to invisible cells that can be utilized to create spacing in HTML email. This method is very rarely used as it doesn’t always work and you need to write an entire table structure for the email template HTML code. Moreover, these codes do not work when you need to code mobile-optimized emails; you need to make new classes to control the height and width of these cells.
4. Margin in <style>
Margin attribute is widely used in web development but is not preferred in HTML email development. There are two reasons for that- lack of standards and presence of inconsistencies between email clients. While the padding attribute adds padding inside the border, the margin attribute adds padding outside the border.
Margin can be used as style=”margin:valuepx;”.
5. Line Breaks
Using the <br> tag is the simplest way to add space in the email content when coded using HTML in email. This method can be used only to create spacing between the texts in the copy of an email and hence it is not used much.
<br> tag can be used before and after the content.
Email clients render line breaks differently, and hence, it is difficult to have pixel-perfect spacing in HTML email with line breaks.
Wrapping It Up
We hope the tricks and tips shared above make adding spaces in HTML emails a hassle-free affair for you. You can consider experimenting with them and determine what works best for your email campaign. And don’t forget to test them for various email clients and screen sizes.
Did we miss something here? Do let us know what method you use to add spacing in HTML emails.
Looking for an HTML email example? Find plenty here.