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 Outlook.com does not support the margin property. The odd thing is Outlook.com 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?

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:

Results:

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

---