Spacer Element
The Spacer element adds empty vertical space between elements. Use spacers for precise control over layout spacing.
Overview
| Property | Value |
|---|---|
| Element Type | spacer |
| Can Contain Children | No |
| Purpose | Vertical spacing |
Use Cases
- Adding space between sections
- Creating breathing room in layouts
- Fine-tuning vertical rhythm
- Device-specific spacing adjustments
- Separating content groups
Size Settings
Height
Set the spacer height:
| Value | Description |
|---|---|
| 8px | Extra small |
| 16px | Small |
| 24px | Medium |
| 32px | Large |
| 48px | Extra large |
| 64px+ | Section gap |
Device-Specific Heights
Set different heights per device:
| Device | Typical Use |
|---|---|
| Desktop | Standard spacing |
| Tablet | Slightly reduced |
| Mobile | Compact spacing |
Example:
Desktop: 48px
Tablet: 32px
Mobile: 24px
Visual Settings
Background Color
Spacers can have a background color for debugging or design:
| Option | Use Case |
|---|---|
| Transparent | Normal use |
| Colored | Debugging layout |
| Accent | Design element |
Debugging
Temporarily add a light background color to see spacer positions, then remove for production.
Layout Settings
Width
Spacers typically span full width:
| Option | Description |
|---|---|
| Full | 100% width (default) |
| Fixed | Specific width |
Advanced Settings
HTML ID
Custom ID for targeting.
CSS Classes
Add custom classes.
Device Visibility
Hide spacer on specific devices:
| Option | Use Case |
|---|---|
| Hide on Desktop | Mobile-only spacing |
| Hide on Mobile | Desktop-only spacing |
Examples
Standard Section Gap
Settings:
- Height: 32px
- Background: Transparent
Large Section Break
Settings:
- Height Desktop: 64px
- Height Tablet: 48px
- Height Mobile: 32px
Responsive Spacing
Between header and content:
Desktop: 40px
Tablet: 32px
Mobile: 24px
Spacer vs. Margin
When to use each:
Use Spacer When:
- You need device-specific spacing
- Space doesn't belong to any element
- Creating section gaps
- You want explicit control
Use Margin When:
- Space relates to a specific element
- Consistent spacing across breakpoints
- Element-level design decisions
Common Spacing Values
| Value | Use Case |
|---|---|
| 8px | Tight spacing, related elements |
| 16px | Standard element gap |
| 24px | Content group separation |
| 32px | Section spacing |
| 48px | Major section gap |
| 64px | Hero to content gap |
Spacing Rhythm
Maintain consistent spacing rhythm:
Heading
[8px spacer]
Text
[16px spacer]
Text
[24px spacer]
Button
[32px spacer]
Divider
[32px spacer]
Next Section
Best Practices
- Be consistent — Use a spacing scale (8, 16, 24, 32, 48)
- Responsive — Reduce spacing on mobile
- Don't overdo it — Too many spacers complicate layouts
- Use margins first — Spacers for special cases
- Document your scale — Keep spacing predictable
Debugging Spacers
If your layout isn't working:
- Add temporary background color to spacers
- Check device-specific values
- Verify spacer isn't hidden on current device
- Check parent container overflow settings
- Review margin/padding on adjacent elements