Spacers and dividers are the unsung heroes of email layout. They control vertical rhythm, separate content sections, and give your email room to breathe. Here's how to use them effectively.
Spacer (mj-spacer)
A spacer adds precise vertical spacing between elements. Unlike padding (which adds space around an element), a spacer is an independent block that creates space between adjacent components.
When to Use a Spacer
- Between sections when you want more space than the default section padding provides
- Before or after a CTA button to give it visual prominence
- Between content blocks within a column
Setting Spacer Height
Select a column in your design, then open the Build Your Own tab in the Email Love plugin and click Spacer to add one. Set the height using Figma's frame height property. Common heights: 20px for tight spacing, 40px for standard, 60–80px for significant breaks.
💡 Pro tip: Don't use spacers when padding would work. If you just need 20px below a text block, add bottom padding to the text component instead of inserting a spacer. Fewer components means cleaner code and smaller file sizes.
Divider (mj-divider)
A divider creates a visible horizontal line between content sections. It's the email equivalent of an hr tag.
Divider Properties
Property | How to Set | Default |
Color | Figma stroke color | #CCCCCC |
Width | Figma frame width or percentage | 100% |
Border width | Figma stroke weight | 1px |
Border style | Via plugin properties | Solid |
Padding | Figma auto layout spacing | 10px 0 |
When to Use a Divider
- Between distinct content sections (editorial and promotional blocks)
- Above or below navigation links
- To separate the main content from the footer
- Between items in a list or catalog layout
Spacer vs. Divider vs. Padding
Use | When | Why |
Padding | Space around a component | Cleanest approach, no extra HTML |
Spacer | Precise spacing between components | Independent control, easy to adjust |
Divider | Visual line between sections | Visible separator, not just whitespace |
Powered by