Spacer

When and how to add spacers.

What is a 'Spacer'?

A spacer is a part that adds space between other parts.

Location in the Parts Library: Base Parts > Layout > Spacer

There is only one spacer part in the part library, and its only function is to add space. As such, there is one editor available for the spacer part, and that is the 'spacing' editor, which can add padding or margin to the spacer.

The spacer can be moved to the left or right, up or down, depending on where it has been placed. This is achieved by selecting the spacer and using the arrow keys in the property editing panel.

Spacer Part

Here is an example of a spacer being added to a navbar to increase the space between the login button and the signup button:

Adding a Spacer to a Navbar, and Moving its Position

The steps to achieve this were:

1. Select the navbar

2. Go to the parts library, and find the spacer part

3. Add the spacer. The spacer is added to the end of the navbar by default.

4. Select the spacer and move it to the left using the arrow keys in the property editing panel, so that it's in the correct position.

You'll notice that with the spacer added, the navbar now takes up the full width of the screen.

In the example below, there is a row containing a column, which has two images in it. The images are against each other, and a spacer has been added to the column. Moving the spacer up using the arrows in the property editor panel creates a space between the two images.

Adding a Spacer to a Column

Related Information

Spacing

Sizing

Alignment