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

# Spacing

> Layout and component spacing

Consistent spacing creates visual rhythm and hierarchy. We use Tailwind CSS's spacing scale across the application.

## Spacing Scale

| Class             | Size     | Pixels | Usage                 |
| ----------------- | -------- | ------ | --------------------- |
| `p-0` / `m-0`     | 0        | 0px    | No spacing            |
| `p-0.5` / `m-0.5` | 0.125rem | 2px    | Micro spacing         |
| `p-1` / `m-1`     | 0.25rem  | 4px    | Tight spacing         |
| `p-2` / `m-2`     | 0.5rem   | 8px    | Small spacing         |
| `p-3` / `m-3`     | 0.75rem  | 12px   | Medium-small spacing  |
| `p-4` / `m-4`     | 1rem     | 16px   | Default spacing       |
| `p-5` / `m-5`     | 1.25rem  | 20px   | Medium spacing        |
| `p-6` / `m-6`     | 1.5rem   | 24px   | Large spacing         |
| `p-8` / `m-8`     | 2rem     | 32px   | Extra large spacing   |
| `p-10` / `m-10`   | 2.5rem   | 40px   | Section spacing       |
| `p-12` / `m-12`   | 3rem     | 48px   | Large section spacing |

## Gap Utilities

Use `gap-*` classes for consistent spacing in flex and grid layouts:

```html theme={null}
<!-- Flex layout -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Grid layout -->
<div class="grid grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>
```

## Common Patterns

<CardGroup cols={2}>
  <Card title="Component Padding" icon="square">
    Use `p-4` for standard component padding, `p-6` for cards and dialogs.
  </Card>

  <Card title="Stack Spacing" icon="layers">
    Use `space-y-4` or `gap-4` for vertical stacks of elements.
  </Card>

  <Card title="Inline Spacing" icon="grip-horizontal">
    Use `gap-2` for tight inline elements, `gap-4` for standard spacing.
  </Card>

  <Card title="Section Margins" icon="rectangle-vertical">
    Use `my-8` or `my-12` to separate major page sections.
  </Card>
</CardGroup>

## Responsive Spacing

Adjust spacing at different breakpoints:

```html theme={null}
<div class="p-4 md:p-6 lg:p-8">
  <!-- Padding increases on larger screens -->
</div>

<div class="gap-4 md:gap-6">
  <!-- Gap increases on medium screens and up -->
</div>
```

## Resources

<Card title="Tailwind Spacing" icon="ruler" href="https://tailwindcss.com/docs/customizing-spacing">
  Full spacing scale documentation and customization options.
</Card>