> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Margin

> Margin is the space between elements, similarly to [padding](/product/component/property-controls/padding) it allows you to create spacing around elements, ensuring proper alignment, readability, and visual balance within a layout.

By adjusting the margin, you can create breathing room between content, preventing elements from feeling cramped or cluttered. With an element selected, utilize the margin overlays by dragging the top or bottom handles to change its vertical margin. For a box, they will be the top-most and bottom-most handle

<Frame>
  <img src="https://mintcdn.com/makeswift/uAOxEZuAmqfTEc_N/images/builder/margin1.gif?s=89c5be90175631dbf46052241d6da71c" alt="Using margin overlays" width="800" height="450" data-path="images/builder/margin1.gif" />
</Frame>

In Makeswift, horizontal [alignment](/product/component/property-controls/alignment) is controlled by applying left and right margin values. If you center align your element, it will assume an equal `auto` value for left and right margins. For left or right aligned elements, it will assume a margin of `0` on the side that it is aligned to, and an `auto` value for the opposite side.

<Frame>
  <img src="https://mintcdn.com/makeswift/uAOxEZuAmqfTEc_N/images/builder/margin2.gif?s=8d30ebe59efe0df8fd85ada9ab3e7d9a" alt="Alignment overlays" width="800" height="450" data-path="images/builder/margin2.gif" />
</Frame>

## Pro tip

For a list or grid of elements with equal spacing, use the [gap](/product/component/property-controls/gap) control instead of margin. This will ensure consistent and easy to manage spacing between elements.

## Shortcuts

Use the preset alignment buttons to quickly center, left, or right align your content. This will automatically adjust the margin values for you.

<Frame>
  <img src="https://mintcdn.com/makeswift/uAOxEZuAmqfTEc_N/images/builder/margin5.gif?s=27f2d78af3cb822943139eefaa4c97eb" alt="Using preset alignments" width="800" height="450" data-path="images/builder/margin5.gif" />
</Frame>

While dragging the margin handles or panel inputs, hold the `⌥ Option` or `Alt` key to equally change margin on both sides of an element. Hold `⇧ Shift  + ⌥ Option` or `Alt` to equally change margin for all sides.

<Frame>
  <img src="https://mintcdn.com/makeswift/uAOxEZuAmqfTEc_N/images/builder/margin6.gif?s=cb86b805b52b70ab88a08871b600abe6" alt="⌥ Option or Alt hotkey" width="800" height="450" data-path="images/builder/margin6.gif" />
</Frame>

## Developer notes

You can give your team control over the margin property for any custom component using the [Style](/developer/reference/controls/style) control.