Learn how outer and inner spacing work in the editor and how to adjust layout spacing for a cleaner, more consistent page design.
Outer spacing and inner spacing are the spaces around an element. Outer spacing is also known as margin, and is the space outside of the element's borders. Inner spacing is also known as padding, and is the space inside these borders. When you adjust the outer spacing and inner spacing of an element, you change its placement and appearance. This can make your site look more customized and professional.
To adjust the outer and inner spacing around an element:
- To access the design editor, select Edit Design from the floating menu to open the design panel.
- Click the element to open the floating menu, then click the option to edit design
- Click Spacing
-
To change the outer spacing (margin), click and edit the numbers in the outer box. You can also click on one of these numbers and use the slider to adjust the size.
-
To change the inner spacing (padding), click and edit the numbers in the inner box. You can also click on one of these numbers and use the slider to adjust the size.
- Click in the respective boxes to edit the margin and padding values. The horizontal margin and padding values are linked. If you change one, the other will automatically update. They can be unlinked by clicking the link icon.
If you see odd spaces that you cannot remove, be sure to check all parts of the widget, including the column in which it is located.
For elements inside a column or inner column, you can quickly adjust the element’s margin by dragging the edges of the element on the canvas in the same direction as the column. This means left and right margins can be adjusted in horizontal columns, and top and bottom margins can be adjusted in vertical columns
Considerations
- When adjusting inline margins directly from the canvas, the margins will be unlinked. When adjusting margins from the Design panel, the margins are linked, meaning if you change one, the other margin will automatically update to match.
- When adjusting inline margins, the same size unit (px, %, vh, vw) set in the design panel will be kept unless the value is 0, in which case it will reset to px.
In flex mode, there are additional measurement options:
- px (pixels). Provides a fixed unit of measurement unaffected by device size variations.
- % (percentage). A versatile unit that scales elements proportionally based on the size of their container.
- vh (viewport height). Dynamically scales elements in relation to the screen's height (viewport).
- vw (viewport width). Dynamically adjusts elements based on the screen's width (viewport), ensuring proportional scaling across different devices.
To change the size unit:
- Open the design panel of an element.
- Navigate to the Spacing section.
- Click into one of the boxes.
- Click the current size unit.
- Click the desired size unit.