> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/utilities/spacing.md).

# r-scale spacing

Utilities for spacing and sizing elements with the theme's responsive r1–r15 scale, plus the hit-area utilities for enlarging tap targets.

Utilities for spacing and sizing elements with the theme's responsive `r1`–`r15` scale.

| Class                                                                                              | What it does                                                                                                           |
| -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `gap-r{1–15}` / `gap-x-r{n}` / `gap-y-r{n}`                                                        | `gap: var(--r{n})` on a flex or grid container                                                                         |
| `p-r{n}`, `px-`, `py-`, `pt-`, `pb-`, `pl-`, `pr-`, `ps-`, `pe-`                                   | Padding on the scale                                                                                                   |
| `m-r{n}` and the same side variants                                                                | Margin on the scale                                                                                                    |
| `w-r{n}` / `h-r{n}` / `size-r{n}`                                                                  | Width, height, or both                                                                                                 |
| `min-w-r{n}` / `min-h-r{n}`                                                                        | Minimum width or height                                                                                                |
| `top-r{n}` / `bottom-r{n}` / `left-r{n}` / `right-r{n}` / `start-r{n}` / `end-r{n}` / `inset-r{n}` | Position offsets                                                                                                       |
| `space-x-r{n}`, `scroll-p-r{n}`, `translate-x-r{n}`, `basis-r{n}`, …                               | The steps are registered on Tailwind's spacing scale, so core spacing utilities accept them                            |
| `hit-area-r{n}`                                                                                    | Grows the element's click target by the step on all sides, with a `::before` pseudo-element                            |
| `hit-area-{x\|y\|t\|b\|l\|r\|s\|e}-r{n}`                                                           | Grows one axis or side. `s` and `e` follow the text direction                                                          |
| `hit-area…-before` / `hit-area…-after`                                                             | Picks which pseudo-element carries the hit area (default `::before`)                                                   |
| `hit-area` (no step)                                                                               | Adds the pseudo-element with no growth. Growth comes from `--hit-area-{top,right,bottom,left}` variables set elsewhere |

Each step reads a `--r{n}` variable from `:root`. At 768px it changes to the tablet value. At 1024px it changes to the desktop value. Keep the same class at every breakpoint. See [Scaling](/core-concepts/scaling.md).

## Values

This table maps spacing steps to pixels. Text uses the same step numbers with a different set of values. See [Type utilities](/reference/utilities/typography.md).

| Step  | Mobile | Tablet (≥ 768px) | Desktop (≥ 1024px) |
| ----- | ------ | ---------------- | ------------------ |
| `r1`  | 2px    | 2px              | 2px                |
| `r2`  | 4px    | 4px              | 4px                |
| `r3`  | 6px    | 6px              | 6px                |
| `r4`  | 8px    | 8px              | 8px                |
| `r5`  | 10px   | 12px             | 12px               |
| `r6`  | 12px   | 15px             | 16px               |
| `r7`  | 14px   | 18px             | 20px               |
| `r8`  | 16px   | 22px             | 24px               |
| `r9`  | 20px   | 27px             | 32px               |
| `r10` | 24px   | 35px             | 38px               |
| `r11` | 32px   | 45px             | 50px               |
| `r12` | 42px   | 56px             | 68px               |
| `r13` | 60px   | 75px             | 96px               |
| `r14` | 80px   | 105px            | 128px              |
| `r15` | 120px  | 150px            | 192px              |

## Examples

### A basic gap

Use `gap-r{n}` to space the items of a flex or grid container:

```html
<div class="flex flex-col gap-r5">
  <h3 class="type-h5">Free shipping</h3>
  <p class="type-p">On all orders over $50.</p>
</div>
```

The gap tightens to 10px on mobile and opens to 12px on desktop without a breakpoint prefix.

### Padding and margin

Use the padding and margin utilities with an `r` step, including the logical side variants `ps-` and `pe-`:

```html
<div class="px-r5 py-r8 mt-r6 border">
  …
</div>
```

### Sizing an element

Use `w-r{n}`, `h-r{n}`, and `size-r{n}` to size boxes on the same scale, so decoration grows with the spacing around it:

```html
<span class="size-r4 rounded-full bg-content"></span>
```

### Enlarging a tap target

Use `hit-area-r{n}` on a `relative` element to grow its click target without moving the layout:

```html
<button class="relative hit-area-r4" aria-label="Close">
  {% render 'core-icon', icon: 'stroke-bare-x' %}
</button>
```

The transparent pseudo-element increases the hit area without changing layout. Use an axis variant for a control in a dense row. The header toolbar uses `hit-area-y-r5` to reach the 44px minimum without widening its buttons. Use an `-after` variant when `::before` is already used for decoration.

## Customizing

Step values are compiled from `constants.yml` and aren't merchant settings. Merchants control gutters, section spacing, and page margins separately. See [Scaling](/core-concepts/scaling.md).