# Spacer Element

The Spacer Element adds empty vertical space between components on your app screen. It’s perfect for improving readability, separating sections, or aligning elements for better visual flow.

***

## <mark style="color:green;">Settings Tab – Adjust the Space</mark>

### Height

* Use the slider to increase or decrease space (in pixels)
* You can also enter an exact value (e.g., 20px, 60px, etc.)

### 👁️ Visibility

Like other Twinr elements, you can choose where and when the spacer appears:

* Platform: iOS, Android, PWA, or All
* Device: Mobile, Tablet, or All
* User: Guest, Logged-in, or All

***

### <mark style="color:green;">✅ Use Case Examples</mark>

| Scenario                            | How Spacer Helps                                   |
| ----------------------------------- | -------------------------------------------------- |
| Add breathing room between cards    | Insert a 20–40px spacer                            |
| Separate banner from product list   | Add a spacer to break visual flow                  |
| Custom layouts with multiple blocks | Use spacers to create clear groupings              |
| Mobile optimization                 | Show different spacers for mobile/tablet if needed |