Spacing controls the empty space between and around elements inside a container. It's an essential tool for creating balanced, readable layouts. All spacing in Instant is measured in pixels (px).
Overview
Proper spacing is crucial for visual hierarchy, readability, and professional design. Spacing helps separate content sections, group related elements, and create breathing room in your layouts.
Understanding Containers and Elements
In Instant, layouts are built by placing elements (like text, images, and buttons) inside containers (like rows, columns, and grids). Think of it like organizing items in boxes:
Container — A box that holds other items (rows, columns, grids)
Element — An item inside a box (text, images, buttons, or even other containers)
When a container holds multiple elements, you can control the spacing between those elements using Gap. When you want to add space around a specific element, you use Spacing Around.
Types of Spacing
Type | Description |
Spacing Around | Adds space around the outside of the selected element |
Gap | Adds space between elements inside a container |
Spacing Inside | Adds space between a container's edges and its contents |
Spacing Around
Spacing Around controls the space around the outside of the selected element. This creates distance between the element and its neighboring siblings or container edges.
Behavior
Applies to the outer edges of the selected element
Creates space between the element and adjacent elements
Works like margin, pushing other elements away
Common Values
Spacing | Use Case |
0px | Elements touching (no gap) |
8px | Tight spacing for compact layouts |
16px | Standard spacing for most content |
24px | Comfortable spacing for readability |
32px | Generous spacing for visual separation |
48px+ | Large gaps between major sections |
Best Practices
Use consistent spacing values throughout your layout (8, 16, 24, 32, 48)
Apply around spacing to create separation from adjacent elements
Use larger around spacing to visually separate an element from its surroundings
Gap
Gap controls the space between elements inside a container. When you have multiple elements (like images, text blocks, or buttons) placed inside a row or column, gap determines how much space appears between each of them.
Behavior
Applies to the space between elements inside a container
Affects all elements within that container equally
Works in both horizontal and vertical directions depending on container layout
Example
Imagine a row containing three buttons. If you set a gap of 16px on the row:
[Button 1] ←16px→ [Button 2] ←16px→ [Button 3]
All buttons are evenly spaced without needing to add spacing to each button individually.
Common Values
Gap | Use Case |
0px | Elements touching (no gap) |
8px | Tight spacing for compact layouts |
16px | Standard spacing for most content |
24px | Comfortable spacing for readability |
32px | Generous spacing for visual separation |
48px+ | Large gaps between major sections |
Best Practices
Use gap on rows, columns, and grids to space elements evenly
Smaller gaps for closely related items (e.g., icon next to text)
Larger gaps to create clear visual separation between items
Spacing Inside
Spacing Inside controls the space between a container's outer edges and the elements inside it. This creates internal breathing room, preventing content from touching the container's boundaries.
Behavior
Creates space between the container's edges and its contents
Prevents elements from sitting flush against container boundaries
Essential for containers with background colors or borders
Common Values
Spacing | Use Case |
0px | No internal padding |
16px | Minimal padding for compact cards |
24px | Standard padding for content sections |
32px | Comfortable padding for readability |
48px | Generous padding for hero sections |
64px+ | Large padding for full-width sections |
Best Practices
Always add inside spacing to containers with background colors or borders
Use larger inside spacing on wider containers
Match inside spacing to your overall spacing scale
Customizing Spacing Directions
For both Around and Inside spacing, you can choose how spacing is applied.
Linked Spacing
Set one value for horizontal spacing (left and right) and one for vertical spacing (top and bottom).
Direction | Affects |
Horizontal | Left and right sides equally |
Vertical | Top and bottom sides equally |
When to use: Most layouts where symmetrical spacing is desired.
Individual Side Spacing
Set separate values for each side independently.
Side | Description |
Top | Space above content |
Right | Space on the right |
Bottom | Space below content |
Left | Space on the left |
When to use: Asymmetrical designs or when specific sides need different values.
Switching Modes
Click the icons on the right side of the Spacing section in the editor to switch between linked and individual spacing modes.
Spacing Scale Recommendations
Using a consistent spacing scale creates visual harmony across your layouts.
Recommended Scale
Value | Token | Use Case |
4px | XS | Micro adjustments, icon padding |
8px | S | Tight spacing, compact elements |
16px | M | Standard spacing, default gaps |
24px | L | Comfortable spacing, card padding |
32px | XL | Section spacing, generous gaps |
48px | 2XL | Large section padding |
64px | 3XL | Hero sections, major divisions |
Consistency Tips
Pick 4-6 spacing values and use them consistently
Double or halve values to maintain proportion (8 → 16 → 32)
Use smaller values for mobile viewports
Responsive Spacing
Adjust spacing for different screen sizes to maintain proportional layouts.
Example Configuration
Viewport | Inside Spacing | Around Spacing |
Desktop | 48px | 24px |
Tablet | 32px | 16px |
Mobile | 24px | 12px |
Best Practices
Reduce spacing proportionally on smaller screens
Maintain visual hierarchy across viewports
Test layouts at all breakpoints
Common Patterns
Card Layout
Property | Value |
Inside spacing | 24px all sides |
Gap (between cards in grid) | 16px |
Hero Section
Property | Value |
Inside spacing | 64px vertical, 48px horizontal |
Gap (content elements) | 24px |
Navigation Bar
Property | Value |
Inside spacing | 16px vertical, 24px horizontal |
Gap (nav items) | 32px |
Product Grid
Property | Value |
Inside spacing | 0px (grid container) |
Gap (between products) | 16px-24px |
Quick Reference
Task | Location |
Set spacing around | Right sidebar → Spacing → Around |
Set gap between elements | Right sidebar → Spacing → Gap (on container) |
Set spacing inside | Right sidebar → Spacing → Inside |
Switch to linked spacing | Spacing section → Click link icon |
Switch to individual spacing | Spacing section → Click individual icon |
Set horizontal/vertical | Linked mode → Enter H and V values |
Set per-side values | Individual mode → Enter Top, Right, Bottom, Left |
Spacing Comparison
Spacing Type | What It Does | Similar To |
Around | Adds space outside the selected element, pushing neighboring elements away | CSS margin |
Gap | Adds space between elements inside a container (row, column, or grid) | CSS gap |
Inside | Adds space between a container's edges and its contents | CSS padding |
Spacing Values at a Glance
Context | Recommended Range |
Icon to text | 4px - 8px |
List items | 8px - 16px |
Card content | 16px - 24px |
Section padding | 32px - 64px |
Page margins | 16px - 48px |