Skip to main content
The Spacing section controls the space around and inside elements. This helps you create clean layouts and proper separation between content. You can find it in the right-side panel when selecting any element.

​
Where to Find It

  1. Select an element on the canvas
  2. Open the right panel
  3. Scroll to the Spacing section
Spacing

​
Margin vs Padding

​
Margin (Outer Space)

  • Controls space outside the element
  • Pushes the element away from other elements

​
Padding (Inner Space)

  • Controls space inside the element
  • Adds space between the content and the element’s edges

​
How to Adjust Spacing

You can control spacing for each side:
  • Top
  • Bottom
  • Left
  • Right
Each side can be adjusted independently.

​
Quick Controls

​
+ / – Buttons

  • Increase or decrease spacing by 5px steps
  • Fast way to fine-tune layout

​
Manual Input

  • Click on a value to type a custom number
  • You can also choose from quick presets like:
    • 0
    • 10
    • 20
    • 40
    • 60
    • 100
    • 140

​
Auto Option

  • Lets the system automatically manage spacing (mainly used for alignment
Screenshot 2026 03 25 At 10 25 43 AM

​
How It Works (Example)

  • Margin Top → 20px
    👉 Adds space above the element
  • Padding Left → 10px
    👉 Pushes content inside away from the left edge

​
Best Practices

  • Use margin to separate elements
  • Use padding to improve readability inside elements
  • Avoid too much spacing — keep layouts balanced
  • Use + / – for quick adjustments instead of guessing values
Last modified on April 2, 2026