Padding

Padding

In a nutshell

Padding controls the inner spacing between an element's boundary and its content. You can apply a single value to all four sides at once, or set each side, top, right, bottom, and left, independently to control its visual density.

1. Description

Padding defines the visual space inside an element*link to elements page*, between its container's visible edge and the content within it. It directly controls the visual breathing room of an element, so more padding makes it feel spacious while less padding creates a tighter, more compact look. It can either be set evenly on all four sides, and have different values on each side to achieve unique layouts.

  

2. Possible values

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

  1. Use px when you need fixed, consistent spacing regardless of the container's layout.
  2. Use % when you want padding to scale proportionally with the layout, making it useful for fluid or responsive layouts.

The minimum value is 0 (no inner spacing). There is no enforced upper limit, though large values will push content outside the portal page's visible area.

ModeHow it worksDescription
UniformOne value applied equally to all four sides.Provides consistent spacing on all sides.
Ideal for: Icons, cards, smaller text blocks, etc
Per-sideIndividual values for top, right, bottom, and left.Supports asymmetric spacing, for example, more breathing room at the top and bottom than on the sides.
Ideal for: Hero sections, frames, complex text blocks with multiple elements, etc

3. Visual reference

The examples below show how padding values affect the appearance of a Image element. The same visual behavior applies to all elements that support padding.

    

                           

4. How to set padding?

  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 Padding accordion within the pane.
  3. Set padding 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

Padding 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. Tab
  9. Button
  10. Portal Forms
  11. Embed

Padding always controls the inner spacing between the element's boundary and its content. For presets such as Navigation Header and Hero Section, padding can be applied to the outer container and to the inner sections individually.

6. Points to note

  1. While padding controls spacing inside an element, margin*link* controls spacing outside it. The latter separates the element from adjacent elements or page edges. You can use padding to adjust breathing room within an element's container and use margin to control spacing between elements on the portal page.

Explore other properties

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