> For the complete documentation index, see [llms.txt](https://appeggiohelp.gitbook.io/appeggio-help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appeggiohelp.gitbook.io/appeggio-help/base-parts/layout/spacer.md).

# Spacer

When and how to add spacers.

## What is a 'Spacer'?

A spacer is a part that adds space between other parts.&#x20;

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Layout > Spacer
{% endhint %}

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.&#x20;

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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FHRrWK0oqF04enLL8Ia9V%2FSpacerEditor.png?alt=media&amp;token=27bbda37-faa0-4690-8287-e87219dc1fb2" alt=""><figcaption><p>Spacer Part</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FpDBMMHLjiujYb7okm4TQ%2FSpacerAddToRow.gif?alt=media&amp;token=ab7eace0-4c42-48f1-ba30-7bc55dc941a2" alt=""><figcaption><p>Adding a Spacer to a Navbar, and Moving its Position</p></figcaption></figure>

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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FtZUMCSuL4TPD4D2iC2TA%2FSpacerAddToColumn.gif?alt=media&amp;token=4b5383c5-7f9a-4dc6-b885-dad66c872fd0" alt=""><figcaption><p>Adding a Spacer to a Column</p></figcaption></figure>

## Related Information <a href="#related-information" id="related-information"></a>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:orange;">Spacing</mark></td><td></td><td></td><td><a href="/appeggio-help/customising-and-formatting/spacing.md">Spacing</a></td></tr><tr><td><mark style="color:orange;">Sizing</mark></td><td></td><td></td><td><a href="/appeggio-help/customising-and-formatting/sizing.md">Sizing</a></td></tr><tr><td><mark style="color:orange;">Alignment</mark></td><td></td><td></td><td><a href="/appeggio-help/customising-and-formatting/alignment.md">Alignment</a></td></tr></tbody></table>
