Email Kit


A consistent scale of spacing across elements brings rhythm and flow to your email. Spacing is how margins and padding are applied in Email Kit.

Paul Sylling

Spacing Scale

The spacing scale is defined by t-shirt sizes varying from double extra small (xxs) to double extra large (xxl) using a base unit of 8. The one exception is that the scale begins at 4px to allow for smaller spacing between any dense sections of your email.

Vertical spacing within your content can range from double extra small (xxs) to double extra large (xxl).

Starting at extra small, the scale increases consistently in increments of 8px. The base unit of 8 was chosen because it can be divided and multiplied resulting in whole numbers thus maintaining a natural rhythm of consistent spacing.

Name Class Pixels (px) Example
None spacer-none 0
Double Extra Small spacer-xxs 4
Extra Small spacer-xs 8
Small spacer-sm 16
Medium spacer-md 24
Large spacer-lg 32
Extra Large spacer-xl 40
Double Extra Large spacer-xxl 48
Templates in Email Kit come with each spacer class included in the style block.

Types of Spacing

As with traditional web development, there are a number of ways to apply spacing and what works in one client or screen size may not work in another.

  • Cellpadding
  • Break Return
  • Padding
  • Margin

Because cellpadding is an HTML attribute, it can't be overridden with CSS media queries thus limiting it’s usefulness on smaller screens. Break returns and margins can be inconsistent across clients.

Email Kit has considered each of the methods above and created a simpler approach using padding that works across all clients.


Spacer classes are included in the head style block of your email.

Both height and line-height are set for broader client support.

Spacer rows create uniform spacing between text elements.

An example of Email Kit's row-based approach to email development.

Best Practices

Follow these best practices when applying spacing to create relationships between elements.

  • To enhance the readability of your email, be thoughtful about the use of white space.
  • Vary the spacing between elements and components to create relationships and hierarchy.
  • Give extra spacing around important elements such as a call-to-action.

Frequently Asked Questions

Answers to common questions about spacing in Email Kit.

Can't I just use break returns (<br>) to control spacing?

Break returns are primarily used to force a line return within content sections. Because each email client renders break returns a little differently, it will be difficult to maintain consistency if they are used for general spacing.

How does the spacing scale adapt to mobile devices?

Starting with the small size (spacer-sm), the scale is reduced by 8px on mobile devices.

Can I create my own spacing scale?

Although the default scale is a pretty good, you are free to edit or extend Email Kit however you see fit. Just edit the height and line-height values of the spacer classes.