Spacing in HTML

HTML Email Spacing Techniques: What Works and Where to Use It

15

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 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 go over email client support for different spacing techniques.

Cellpadding

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:

cellpadding="20"

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 drawback with using cellpadding when coding emails 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.

When to use cellpadding in emails

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.

Empty cells

When I use the term “empty cells,” I’m referring to empty <tds> that we can add to HTML email 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 email spacing techique compared to other methods is that it doesn’t always work. Unfortunately, empty table cells in HTML emails don’t always retain their height. So, if you use this spacing technique, be sure to preview the email in a variety of major clients.

Another problem is the amount of code you’ll need to write. Rather than specifying one bit of HTML or CSS, you’ll have to 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.

When to use empty cells in emails

Due to the various drawbacks, we recommend avoiding the use of empty cells in email code unless you’re forcing height between table cells. 

Instead, we’d suggest the use of cell height and/or width values, or colspan, rowspan and padding instead of empty cells. As long as you’re not using borders, this should help you achieve identical layouts in all browsers.

Line breaks

One of the simplest ways to add space in an HTML email 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.

When to use line breaks in emails

The most useful place to use line breaks as an email spacing solution is between text. We wouldn’t recommend using it to force spacing in other situations.

CSS padding property

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.

The CSS box model includes the border and margin, which we’ll discuss next. Here’s how the model breaks down:

CSS box model diagram
Courtesy: W3 Schools

In the past, padding has been a big headache for email developers. Outlook has also been known to throw a bit of a tantrum when using padding on paragraph, div or anchor tags.

However, the situation isn’t quite as frustrating since Microsoft switched the Outlook.com rendering engine to the Office 365 rendering engine. This opens the door for developers to revisit padding with CSS to solve spacing issues.

style="padding:20px;"

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. 

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. 

When to use CSS padding in emails

Try using padding anywhere you need to add space that could change dynamically. For me, it often comes down to a choice between using padding and cellpadding to force spacing.

According to Can I Email, desktop versions of Outlook are the main clients without support for the padding property.

CSS margin property

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:

style="margin:20px;"

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 been a bit tricky to get right. But, much like padding, the efforts by email companies to modernize their rendering engines could lead to a resurgence of margin in HTML emails.

When to use CSS margin in emails

Margin is a good way to add some white space in HTML emails to keep them from looking 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 margin could create problems in many versions of Outlook. And, be aware that Gmail doesn’t support margin with negative values.

How Do You Fix 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 LinkedIN, 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 work on dozens of major email clients and devices. That means you know how your email will look before it hits the inbox.

Unlike other platforms, Email on Acid’s customers enjoy unlimited testing. You’ll never hit a ceiling or face overages. Keep testing and tweaking until you achieve email perfection!

This blog post was updated in November 2021. It was also updated August 2018 and was originally published in October 2016.

Do More in Less Time with Email on Acid

Stop switching back and forth between platforms during pre-deployment and QA. With Email on Acid you can find and fix problems all in one place. Double check everything from content to accessibility and deliverability. Plus, with accurate Email Previews on the most popular clients and devices, you can confidently deliver email perfection every time.

Start for Free

Avatar for Alex Ilhan
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.

Avatar for Alex Ilhan
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.

15 thoughts on “HTML Email Spacing Techniques: What Works and Where to Use It”

  1. Nice post Alex. Really good to see all this wisdom packaged into one easily digestible read. Would be interested to know what you think about the capital M ‘Margin’ CSS rule hack? I’ve been using it for a long time to get control back over top/bottom margins on typographic elements, but I’ve also seen examples of it being used to replace padding in some places.

  2. Hi Andy,

    The only place I really use margin is to take back control on like you mentioned. Other than that, I try and stick to padding – though it’s purely personal preference. If you had some good examples of it being used to replace padding I’d be happy to bulk out the post a bit more.

    Thank you for the kind words on the post also!

  3. For spacing copy I have relied mostly on a div placed after each paragraph/header/etc… My main client was a stickler for having the email spaced EXACTLY like the mock up. So if there was 35px between the header and copy beginning, I had to get 35px.

    I would use style=”font-size: 35px; height: 35px; line-height: 35px; mso-line-height-rule: exactly;” changing the px value for different heights.

    This was a great post though, nice to see all the different ways in one place.

    I quit using margin very early in my email html career, seemed to always cause me more of a headache than anything.

    1. Great!

      I am developing an email signature generator for my company.

      After trying everything possible that we could imagine and having no standard layout result in different mail clients and with all browsers, you saved me with this solution!!

      Thank you.

    2. Philip,

      How does that code work for you on MS? To my understanding in order to get mso-line-height-rule:exactly, the line-height has to be listed after and not before the mso css. I actually found this to be true. Just wondering if that code is actually working in MS for you or not when you have it typed i that order. Just curious…

  4. Hi Philip,

    Glad to hear you enjoyed the post! I know the pain of trying to achieve pixel perfection from client requests!

    Alex

  5. I find using margin spacing useful in bulleted lists between blocks of text (e.g.

  6. ) — no CSS to deal and you can make the final bullet have a little extra space if you want.
  7. Hiya, Alex, thanks for this run down. To build on your *Empty Table Cells* example I use something similar:

      // so technically the cell isn’t empty

    The ` ` is invisible, but counts as content, so things like padding and height work. The `font-size: 0; line-height: 0;` zero out any unwanted space that could be inherited from styles elsewhere. This can be used for horizontal and vertical spacing.

    Thanks again for the article, cheers!

  8. Luke,

    Great idea! I’m going to have a look at building that into some of my boilerplate templates.

    Ted,

    Glad to hear you liked the article! I tend to add the &nb; sp; ‘cheat’ when dealing with spacing below 20px, I’ll update the article with your suggestion.

  9. First thanks for taking time to write this. Second, I’m really surprised to see you’re even talking about cellpadding and margin. Both are against email best practice. Padding in CSS styles, combined with html align attribute on table/td is enough to support 100% of the layout positioning cases. Regarding line-heights section, looks like mso-line-height-exactly is missing.

    @Ted Goas, zero is font-size will backfire twofold: 1) spam scores; 2) zero being unsupported. It’s best to use font-size: 1px; line-height: 1px. I had this case in production and my colleagues were already burnt by using zero px. Also, I’d definitely pair that with mso-line-height-exactly.

    @Luke Erickson, don’t use margin-bottom, use padding-bottom on container TD. Outlook.com doesn’t support margin. See https://www.campaignmonitor.com/css/

  10. I use margins sometimes, but you should always use it with a capital M. Margin-top: 10px for example. I’d also stick to using it on a

    . I use padding usually as I know it works everywhere.
  11. I made my own spacer-element to replace the
    tag. Works great in all clients. Since the new gmail app I don’t even use inline styling anymore. This is the element:

     

    This is the CSS:
    .spacer {
    height: 10px;
    mso-line-height-rule: exactly;
    line-height: 10px;
    font-size: 10px;
    display: block;
    }

    1. Hello memtn,
      Can you share this code again please??? Gone at this point in time.

Comments are closed.