Spacing

Spacing is one of the most commonly used settings. It pushes a component’s content further inwards and away from the component edges.

To setup the spacing on any component:

1. Right-click the component you wish to add spacing to
2. Open its general Style setting and find the Spacing setting
3. Optionally, toggle the All sides equal checkbox for editing all sides at once
4. Type in the values manually in the input boxes, or click and drag the bars for manual control

Adding Space Between Rows and Columns

One of the most common use cases of spacing is to separate the content between rows and columns. However, rows are responsive, and so their columns will stack vertically at a certain screen size, which can lead to troubles with spacing. There is however a bulletproof solution.

Let’s say you want a row with columns where the space between the columns and the edge of the row is always 10px. Here’s how you do it correctly:

1. Add All sides equal, 5px spacing to the row
2. Add All sides equal, 5px spacing to each column

This way, no matter if the columns are side by side or stacked, you will always get an equal spacing everywhere.