# Alignment and Spacing

Elements and containers can be quickly aligned and spaced out using the **Styles** tab in the right panel.

### Alignment

#### How to align containers

You can align containers and all objects inside by modifying the **Layout** in the **Style** tab.

You'll see two kinds of alignment when you select a container; 

**`Align self`**: Use this to modify the position of the selected container.

**`Align content`**: Use this to modify all the objects inside the selected container without impacting the parent container.  

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FD6KBxAD0m1UfsedYUsqf%2Fdocs_alignment-parent.gif?alt=media&#x26;token=2ae2499c-edfe-4a1d-b500-3863bafb7111" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Create a form body container nested inside your step container to easily align the form content and set a standard width. This is especially helpful for stand-alone forms that are not embedded.
{% endhint %}

#### How to align elements

If you want all the objects to have the same alignment...

* Select the parent container
* Modify `Align content` to apply one alignment to all elements inside the container.

If you want to give a different alignment to some objects...

* Select the element directly
* Modify `Align self` to override the container styles for the individual element

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FOHBg1Bvt6gywPDfXDhv0%2Fdocs_alignment-child.gif?alt=media&#x26;token=78763fd5-aa0a-492f-8c58-7b4dee2d0bab" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Not seeing the alignment you applied? Check the individual object and its parent container to see if an override alignment is applied. If an object has `align self` modified, it may not react to `align content`.
{% endhint %}

### Spacing

#### How to use gaps

You can evenly space out all objects inside a container using `Gaps`. A standard `Gap` can be added in the **Layout** section of the **Style** tab.&#x20;

Gaps allow you to evenly space out objects you have already placed and any new objects added to the container.&#x20;

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FD1YXXB24XkFSChnldAAw%2Fdocs_spacing-gaps.gif?alt=media&#x26;token=57634222-2f86-40bd-9ab8-184184b020ea" alt=""><figcaption></figcaption></figure>

#### How to use automated spacing

Use `Spacing` to set an automatic layout if you have multiple objects inside a container with its height set to `fill` or an exact `pixel` value.&#x20;

If your objects are in a `fit` container, use Gaps instead. Automatic spacing also will not impact containers with a single element or container in it. Add another object to see the spacing applied.

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2FsX1Gk9P48QSHcpYqzPSj%2Fdocs_spacing-auto.gif?alt=media&#x26;token=371e7c7d-642c-4464-a99f-3699abbf4914" alt=""><figcaption></figcaption></figure>

### Demo

{% embed url="<https://www.loom.com/share/a6fb7df0dd774535985f7f4b1c6f26e4>" %}