Margin

Margin

In a nutshell

Margin controls the outer spacing between an element's boundary and its surrounding elements or parent container. You can apply a single value to all four sides at once, or set each side, top, right, bottom, and left, independently to control how the element sits within its layout.

1. Description

Margin defines the visual space outside an element*link to elements page*, between its outer edge and the elements around it or the boundary of its parent container. It directly controls how separated an element feels from its neighbors. A larger margin creates greater distance and visual breathing room between elements, while less margin brings them closer together.

  

2. Possible values

Margin accepts numeric values in px (pixels) or % (percentage):

  1. Use px when you need fixed, consistent spacing regardless of the element's size or its parent's dimensions.
  2. Use % when you want margin to scale proportionally with the parent container's width, useful for fluid or responsive layouts.

The minimum value is 0 (no outer spacing). There is no enforced upper limit, though very large values may push the element outside its parent's visible area.

ModeHow it worksDescription
UniformOne value applied equally to all four sides.Provides consistent outer spacing on all sides

Ideal for: Icons, cards, smaller text blocks, etc.
Per-sideIndividual values for top, right, bottom, and left.Supports asymmetric outer spacing, for example, more separation above and below an element than on its sides.

Ideal for: Hero sections, frames, complex text blocks with multiple elements, etc.

3. Visual reference

The examples below show how margin values affect the spacing around a Image element. The same visual behavior applies to all elements that support margin.

    

     

4. How to set margin?

  1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
  2. Click and open the Margin accordion within the pane.
  3. Set margin values:
    1. Uniform: Enter a value in pixels or percentage that gets applied to all four sides.
    2. Per side: Click the per-side icon () and enter individual values in pixels or percentage for each side, T (top), R (right), B (bottom), and L.
  4. Click Save in the top right corner to ensure the changes are retained.

5. Applicable elements

Margin is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

  1. Text
  2. Image
  3. Icon
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. Menu
  8. Button
  9. Portal Forms
  10. Embed

6. Points to note

  1. While margin controls spacing outside an element, padding*link* controls spacing inside it. The latter adds breathing room between the element's boundary and its own content. Margin can be used to separate elements from each other and padding to control the space within an element.
  2. The element's dimensions as set in Layout*link to Layout doc* are not changed by margin values. It only affects the space between the element and its surroundings.
  3. Margin always controls the outer spacing between the element's boundary and its surroundings. For preset elements such as Navigation and Hero Section, margin can be applied to the outer container as a whole and to the individual basic elements within.

Explore other properties

  1. Alignment
  2. Layout
  3. Padding
  4. Font
  5. Background
  6. Corner Radius
  7. Border
  8. Shadow
  9. Opacity
  10. Image and icon styling
  11. Tab styling
  12. Stack styling