# 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="/files/QqSjJwjfqX4i7QykwZDW" 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="/files/YgtH6LreUB0JhdX0kmht" 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="/files/pXloDHAGClBzPsrTyrT7" 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="/files/OiRA2b7JXlu916KatDoM" alt=""><figcaption></figcaption></figure>

### Demo

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feathery.io/platform/build-forms/design/alignment-and-spacing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.