> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element Reference: Spacer & Divider

> Control spacing and visual separation in your emails

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.

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

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