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
<a>tags. We’ll need to use margin instead.
- Forget about using CSS positioning like
- 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?
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> 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.
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.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.