> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/spacing.md).

# Spacing

Add responsive margin and padding to components

Spacing controls the space outside and inside a component:

* **Margin** creates space outside the component’s border.
* **Padding** creates space between its content and border.

{% embed url="<https://youtu.be/8xS_OMqpw4U>" %}

### Enable

The general Spacing control is disabled by default. Enabling **Margin & Padding** reveals both diagrams, with every side set to 0.

Some controls use specialised defaults:

| Variant   | Enabled | Margin                                 | Padding                           |
| --------- | ------- | -------------------------------------- | --------------------------------- |
| General   | No      | 0 on every side                        | 0 on every side                   |
| Container | Yes     | Top 0, Right Auto, Bottom 0, Left Auto | 0 on every side                   |
| Button    | Yes     | Top 0, Right Auto, Bottom 0, Left Auto | 2 vertically and 3.5 horizontally |
| Input     | Yes     | 0 on every side                        | 2 vertically and 3.5 horizontally |

Disabling Spacing removes its margin and padding classes rather than setting them to 0.

### Using the Spacing Control

The Theme/Manual button switches between Theme Spacing values and arbitrary CSS values. Drag a manual value to adjust it; hold Shift while dragging for finer increments.

The links between opposite sides control whether vertical or horizontal values change together.

<figure><img src="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2F2CQcw3J2AYeXbZLpBQCN%2FCleanShot%202024-10-16%20at%203%E2%80%AF.05.02%402x.png?alt=media&amp;token=e518f376-14d3-4b02-a3b0-455d02f37368" alt="Spacing controls with margin and padding diagrams"><figcaption><p>Margin surrounds the component; padding sits inside it.</p></figcaption></figure>

### Margin

Set Top, Right, Bottom, and Left independently or link opposite sides. Manual values can be negative when an intentional overlap is required.

**Auto** tells the browser to absorb available space on that side. Common horizontal combinations are:

* **Left Auto + Right Auto** — Centres a component with a constrained width.
* **Left 0 + Right Auto** — Keeps it at the start.
* **Left Auto + Right 0** — Pushes it to the end.

{% hint style="warning" %}
Auto margins can override the alignment and gap set by a Flex or Grid parent. For children inside Flex or Grid, set all margins to 0 unless the Auto margin is an intentional item-level override.
{% endhint %}

### Padding

Set Top, Right, Bottom, and Left independently or link opposite sides. Padding expands the area occupied by a background, border, or rounded corner and keeps content away from those edges.

Useful starting points include:

* Equal padding on every side for cards and panels.
* Larger vertical than horizontal padding for banners.
* Compact vertical and horizontal padding for buttons and inputs.

### Responsive Spacing

Margin and padding values can change by breakpoint. Start with the smallest/Base layout, then override only the sides that need to change at larger breakpoints.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/spacing.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.