back arrow
All Blogs
email spacing

5 Effective Techniques to Add Spacing in HTML Email

Struggling with adding spacing in your HTML Email? These techniques can help! ...

[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.

Need help with Email Design & Coding?

Avail of our cost-effective custom email template production services.

Download Rate card

Thanks

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.

Did you like this post? Do share it!

    Get In Touch

    We shall get back to you within a few hours.

    The following two tabs change content below.

    Kevin George

    Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.

    3 thoughts on “5 Effective Techniques to Add Spacing in HTML Email”

    • I would like to thank you for the efforts you have put in writing this website.
      I’m hoping to view the same high-grade content from you in the future as well.

      In fact, your creative writing abilities has inspired me to get my own, personal site now 😉

    • Hi, I think your site might be having browser compatibility issues.
      When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it has some
      overlapping. I just wanted to give you a quick heads up!

      Other then that, fantastic blog!

    • Magnificent beat ! I wish to apprentice even as you amend your website, how could i subscribe for a blog site?
      The account aided me a applicable deal. I were tiny bit familiar of this your broadcast offered vibrant clear
      idea

    Leave a Reply

    YOU MAY ALSO LIKE

    WE CAN ALSO HELP YOU WITH

    Email Template
    Productions

    Transform your requirement into visually-appealing & high-converting email templates.

    EMAIL OPERATION
    SUPPORT

    Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.

    DEDICATED
    RESOURCE TEAM

    Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.

    Digital
    ASSETS

    Get more from your paid marketing campaigns through conversion-driven landing pages and banners.