Spacer Block (mj-spacer)
Control vertical whitespace, manage breathing room between components, and handle responsive spacer adjustments.
Key Takeaways
- Spacers introduce intentional vertical blank space between blocks.
- Set exact pixel heights (e.g. 16px, 24px, 32px, 48px).
- Compiles to table cells with explicit height and font-size/line-height:0 resets to prevent Outlook default line-height inflation.
- Configure mobile overrides to reduce tall desktop spacers on smaller mobile displays.
Why Spacers Matter in Email#
In web browsers, you can set margin-bottom: 32px on any div. In email, margins are notoriously unreliable:
- Outlook 2016–2021 desktop frequently strips CSS
marginproperties. - Gmail ignores negative margins and collapses certain paragraph margins.
The Spacer Block (mj-spacer) solves this by inserting an empty table row with explicit line-height and font-size resets:
This guarantees pixel-perfect vertical height across all inboxes without relying on fragile margins.
Responsive Spacer Heights#
A generous 48px spacer between your hero section and body copy feels spacious on desktop, but pushes content below the fold on a smartphone.
To adapt spacer height for mobile:
- Select the Spacer block.
- In the right panel, open the Mobile tab.
- Lower the height from
48pxto24px. - Mobile devices will now render a compact 24px gap while desktop screens retain the spacious 48px layout.
Frequently Asked Questions
Should I use Spacers or Section Padding?
Use Section Padding for top/bottom breathing room at the edge of sections. Use Spacers when you need precise, adjustable vertical gaps between blocks inside a column.
Can I hide a spacer on mobile entirely?
Yes. Open the Mobile tab in the spacer properties inspector and toggle "Hide on Mobile" to collapse the whitespace on phone screens.