Click to Sign Up for a 7 Day Free Trial!

Email Development

Spacing Techniques in HTML Email

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.

Cellpadding

The cellpadding HTML attribute specifies the space, in pixels, between the cell wall and the cell content. We apply it simply by adding it to our tables with HTML like so;

cellpadding="20"

The biggest advantage to using cellpadding is the support. HTML tables are, very obviously, widely supported across all email clients. 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.

Empty Cells

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 you can see from our blog back in 2013, empty table cells don't always retain their height.

Another problem is the amount of code to write. Rather than simply specifying one bit of HTML or CSS, we have to code an entire table structure. Another negative consideration is the complication of mobile optimisation; the way to create this as a mobile email is to either hide the cells completely or make new classes to control the width and height of these spacing cells. Both of these methods require media query support. The final mark against this method the fact that it requires exact pixel widths, making it not suitable for Fluid Hybrid emails.

Where I use empty cells

I do not use empty cells, unless forcing height between table cells. The reason being that I likely won't need to change a 20 pixel height divider. You can read more about using empty cells here.

Breaks

One of the simplest methods of adding spacing, the line break. See below for implementation.

<img src="http://placehold.it/600x150" style="display:block;" border="0"> 
<br><br>
Content goes here

As you can see, you add breaks inside of the content HTML. Unfortunately, this method is largely unused except for adding spacing between text or forcing line returns in your content. Various email clients are known to read the linebreaks at 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 force spacing in other places.

Padding

Part of the CSS box model, padding a common method used in web development for creating spacing and often used in email development too. In the past, padding has been a big headache for email developers. However, we've seen over the last year or two 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 us as developers to revisit padding.

style="padding:20px;"

Above, you can see how simple it is to implement; just a bit of inline CSS and we're away. The big advantage to this, as mentioned above in the Cellpadding section, is the ability to override this in the head of the email. This means that, 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 recent announcement of support for media queries, this is a very 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

Anywhere I need to add padding that could change dynamically I add padding. For me, it comes down to a choice of using padding and cellpadding to force spacing.

Margin

Another part of the CSS box model, margin is another common method used in web development to add spacing. Though, in my opinion, lesser used in email development. This is how you would implement margins:

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 always been tricky. But, much like padding, the efforts by email companies to modernise their rendering engines could well 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!

Closing words

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 realise there were better methods. How do you control spacing? Do you use a mashup of methods or do you stick specifically to one method?

About the Author

Alex Ilhan

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.

Join the Discussion

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.
Andy Babic
Hi Andy,

The only place I really use margin is to take back control on <h1s> 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!
Alex Ilhan
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.
Philip Leitch
Hi Philip,

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

Alex
Alex Ilhan
I find using margin spacing useful in bulleted lists between blocks of text (e.g. <li style="margin-bottom: 8px;"> ) -- no CSS to deal and you can make the final bullet have a little extra space if you want.
Luke Erickson
Hiya, Alex, thanks for this run down. To build on your *Empty Table Cells* example I use something similar:

<tr>
<td height="40" style="font-size: 0; line-height: 0;">
  // so technically the cell isn't empty
</td>
</tr>

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!
Ted Goas
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.
Alex Ilhan
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/
Roy Reveltas
@Roy
Thanks for commenting! Interesting point about spam scores, I haven't seen that before.

As far as margin, it is supported in Outlook.com as long as you capitalize it wink
https://www.emailonacid.com/blog/article/email-development/outlook.com-does-support-margins
Geoff Phillips
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 <td>. I use padding usually as I know it works everywhere.
SquareBalloonEoin
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:

<div class="spacer"> </div>

This is the CSS:
.spacer {
height: 10px;
mso-line-height-rule: exactly;
line-height: 10px;
font-size: 10px;
display: block;
}
veritate
Using the same div element approach as veritate: https://thememountain.github.io/pine/components/spacer.html

From our tests, you don't need the height on the div, line-height and font-size will do. Also, divs are block-level elements, so you don't need display: block; on them.
thememountain

Leave a Comment