Product Design Lessons

Responsive Email Design  |   Lesson #119

Bulletproof vertical spacing in HTML Emails

The perils of vertical spacing in HTML emails and the fix for it


One thing that is consistent in email development is how inconsistent your emails will look on different email clients. Luckily, using Foundation for Emails can help things get more consistent by packaging up all the know-how, workarounds, and hacks on the web so you don’t have to worry about these issues. One of those challenging inconsistencies is with vertical spacing between or inside your elements. In this lesson you’ll learn some of the perils of vertical spacing in HTML emails and what techniques actually work on all clients.

What CSS Can You Use?

Support of CSS properties varies greatly between email clients. You're best off sticking with the basics and not getting too fancy. After all, our goal is to get this email looking consistent on all major email clients.

This CSS compatibility chart will really save you some pain when writing CSS: CSS Support Chart

So what does this tell us?

  • Outlook 2007, 2010, and 2013 does not support "padding" in <p>, <div> or <a> tags. We’ll need to use margin instead.
  • Forget about using CSS positioning like top, bottom, relative, absolute.
  • Margin is universally supported BUT you will see some inconsistencies in Outlook 2007, 2010, and 2013. Padding is safer. Also, it is known that does not support the margin property. The odd thing is does support margin with a capital "M".

At ZURB, we prefer to use bottom-margin to create constant vertical spacing between elements. It helps us avoid issues with collapsing margins (2 margins touching each other) and help keep a nice vertical rhythm.

We’ll use it like this:

So how well does this work?


Outlook 2007, 10, 13

Not quite what we’re going for. Using bottom-margin would really be the best, but it won’t work across the board so we’ll try other methods.

What About a <br>?

Break or <br> tags are ok, but you won't get pixel perfect results and you can quickly fill up your code with messyness.

Let’s try it:



Outlook 2007, 10, 13

<br>'s work ok except when used inside containers with padding. You see that in Outlook 2007,10, 13 the spacing is collapsed between the image and text but preserved above the button.

The Bulletproof Solution

You want pixel perfect spacing? Your best option for vertical spacing is to use the <spacer> component in Foundation for Emails. It works consistently on all email clients and lets you set the height with the size attribute. So <spacer size="32"></spacer> will create 32px of vertical space.

You can use the spacer inside of your element to provide more space or between elements.

Next Steps

Figuring out these inconsistencies in HTML emails can be annoying and time consuming. Some of them just don’t make sense. We’ve accumulated our experience in sending millions of emails into Foundation for Emails so you can build freely and worry less about cross browser issues. If you want to hone your skills as an email expert, be sure to check out our ZURB Master Course: Responsive Emails.

About the instructor


Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.