Understanding how Inner and Outer Spacing work
Inner and Outer Spacing gives your components space to breathe.
Inner Spacing (padding) works by creating space within the component. It is represented by the green area seen around the component. The Section and Row components will display green handles to edit their inner spacing.
Outer Spacing (margins) pushes components away from the selected component. It is represented by the red handles found around almost every component when selected.
Using Inner Spacing
You can change the Inner Spacing for individual sides of a component. To the left of the input field, you'll find 4 blue lines surrounding a square. You can turn each line on or off to apply different inner spacing values to selected sides. Click on the square in the middle to select or deselect all 4 sides quickly.
💡Save some time by dragging left or right on the inner spacing input field to quickly update it.
Using Outer Spacing
Once selected, red handles will appear. You can add bottom spacing by dragging the bottom red handle down. To add top spacing, click, hold, and drag the component down. The left and right handles will edit the width of the component.
💡When both left and right handles are visible, that indicates your component is perfectly aligned at the center.
Understanding spacing increments
The amount of pixels you add as inner or outer spacing is a multiple of the spacing value you set and your page layout's spacing increments.
The inner and outer spacing increments are set in your page layout within the Theme tab of the page:
In the above example, the layout's "Inner Spacing Increment" is set to 8px. If the selected component's inner spacing is set to 2, this means the component will have 16px of inner spacing on each side.
Here is a headline component with 16px of inner spacing on each side: