Overview
The Spacer element is an empty <div> with a height class used for adding vertical whitespace between elements. It renders with a default height of h-8 (32px) and contains no content or children.
Spacers are purely visual utility elements that help create breathing room in your layouts without relying on margin or padding on surrounding elements.
Use Spacer for intentional whitespace between major sections. For consistent spacing between siblings (like items in a list or cards), prefer using gap classes on the parent container instead.
Settings
Configure your spacer using these settings in the Inspector panel:
| Setting | Description | Default |
|---|---|---|
| Height | Vertical space using Tailwind's height scale | h-8 (32px) |
| Responsive Height | Different heights per breakpoint for responsive layouts | None |
Tailwind Height Scale
The spacer height uses Tailwind's standard spacing scale:
| Class | Height |
|---|---|
h-1 |
4px (0.25rem) |
h-2 |
8px (0.5rem) |
h-4 |
16px (1rem) |
h-6 |
24px (1.5rem) |
h-8 |
32px (2rem) - Default |
h-12 |
48px (3rem) |
h-16 |
64px (4rem) |
h-20 |
80px (5rem) |
h-24 |
96px (6rem) |
h-32 |
128px (8rem) |
Examples
Standard Spacer (h-8)
The default spacer adds 32px of vertical space:
<!-- Content above -->
<div class="h-8"></div>
<!-- Content below -->Large Spacer (h-16)
Use a larger spacer between major sections:
<section class="py-12">
<!-- Hero section content -->
</section>
<div class="h-16"></div>
<section class="py-12">
<!-- Features section content -->
</section>Responsive Spacer
Create spacers that adapt to different screen sizes:
<!-- Small spacing on mobile, medium on tablet, large on desktop -->
<div class="h-8 md:h-12 lg:h-16"></div>Add responsive height classes using the breakpoint selector in the Inspector. Changes made at tablet or desktop breakpoints will use md: or lg: prefixed classes.