🏗️ Padding (Inside Space)
What it is: Space added inside a widget, column, or section—between its content and its border/edge.
Use it to:
Prevent text or images from touching container edges
Add breathing room within colored backgrounds or bordered areas
Balance visual weight around content
How it works:
Can be set in pixels, percentages, em/rem units
Adjustable per side: top, bottom, left, and right
Values cascade** unless you unlink sides for different top/bottom and left/right spacing
🌐 Margin (Outside Space)
What it is: Space added outside a widget, column, or section—separating it from neighboring elements.
Use it to:
Create clear gaps between sections or widgets
Control the flow of content vertically or horizontally
Prevent elements from overlapping
How it works:
Similar to padding, margin can be defined per side
Settings apply via pixels, percentages, em/rem, or viewport-based units
Unlink controls to assign unique spacing to each side
🎛️ How to Adjust Spacing
Select Element
Click the desired widget, column, or section.
Open the Advanced tab in the sidebar.
Choose Units
Pick from
px,%,em, orrem.(Advanced users can also use
VWorVHvia custom CSS.)
Set Padding or Margin Values
Input values into specific sides or unlink to input individually.
Use slider, arrows, or direct input.
Responsive Spacing
Adjust spacing separately for desktop, tablet, and mobile.
Use device icons to switch controls per screen size.
💡 Best Practices
| Goal | Use Margin or Padding? |
|---|---|
| Isolate elements from others | Use margin outside spacing |
| Add space within a colored or bordered box | Use padding inside spacing |
| Ensure readability on mobile | Increase top/bottom padding/responsive values |
| Prevent overlap with fixed headers | Use top margin or padding considering header height |
🛠️ Pro Tips
Use
em/remunits for spacing that scales with text size.Use
%spacing for fluid layouts that adapt to container width.Embrace separate device settings to optimize mobile layout
Watch out for negative margins—use carefully for overlapping effects
Leave content unlinked for balanced spacing across all sides
In summary, padding adds internal room inside elements, while margins create external separation. Together, they offer powerful tools for clean, responsive page design—without needing CSS hacks
