---
title: Padding and Margin
description: Fluid padding and margin utilities that scale continuously with the viewport or a container, in linear, exponential, and logarithmic variants.
sidebar:
  order: 1
---

Fluidity provides eighteen fluid spacing utilities across two groups: nine for padding and nine for margin.
Each ships in all three curve variants (linear, `exp-`, `log-`) and works with any Tailwind variant.

## Padding utilities

Control padding on all sides and individual edges:

| Utility  | CSS Property           |
| -------- | ---------------------- |
| `f6y-p`  | `padding` (all sides)  |
| `f6y-px` | `padding-inline`       |
| `f6y-py` | `padding-block`        |
| `f6y-ps` | `padding-inline-start` |
| `f6y-pe` | `padding-inline-end`   |
| `f6y-pt` | `padding-top`          |
| `f6y-pr` | `padding-right`        |
| `f6y-pb` | `padding-bottom`       |
| `f6y-pl` | `padding-left`         |

## Margin utilities

Control margin on all sides and individual edges:

| Utility  | CSS Property          |
| -------- | --------------------- |
| `f6y-m`  | `margin` (all sides)  |
| `f6y-mx` | `margin-inline`       |
| `f6y-my` | `margin-block`        |
| `f6y-ms` | `margin-inline-start` |
| `f6y-me` | `margin-inline-end`   |
| `f6y-mt` | `margin-top`          |
| `f6y-mr` | `margin-right`        |
| `f6y-mb` | `margin-bottom`       |
| `f6y-ml` | `margin-left`         |

## Value forms

Both padding and margin utilities use the `spacing` value kind, which accepts spacing-scale numbers and arbitrary values:

- **Pair** (both from scale): `f6y-p-2/8` -> padding ramps from `0.5rem` (spacing-2) to `2rem` (spacing-8)
- **Arbitrary** (both bracketed): `f6y-p-[1rem]/[3rem]` -> ramps from `1rem` to `3rem`
- **Mixed** (scale and arbitrary): `f6y-p-2/[3rem]` -> ramps from `0.5rem` to `3rem`
- **Min only** (no max): `f6y-p-2` -> ramps from `0.5rem` to `0.5rem * ratio` (default `1rem`, 2× multiplier)
- **Bare** (value omitted): `f6y-p` -> ramps from the spacing default `1rem` to `2rem` (the default `--spacing(4)` through its 2× ratio)

The spacing scale maps numbers to lengths: `2` is `0.5rem`, `4` is `1rem`, `8` is `2rem`, etc.
Arbitrary values use CSS length units (`rem`, `px`, `%`, etc.) and can be percentages.

## Live demo

Resize this container to see padding grow along the ramp:

<Demo hint="Drag the corner to resize this container ->" resize>
  <div class="f6y-demo-track">
    <div class="f6y-demo-box f6y-p-2/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
      f6y-p-2/8
    </div>
  </div>
</Demo>

```html title="Padding demo"
<div class="@container">
  <div class="f6y-p-2/8 f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[48rem]">
    Padding ramps from 0.5rem to 2rem as this container grows
  </div>
</div>
```

## Curves and variants

All eighteen utilities come in three curve variants: linear, exponential, and logarithmic.
They differ only in how they transition between min and max:

- `f6y-p-2/8`: linear progression
- `f6y-exp-p-2/8`: exponential (slow start, fast finish)
- `f6y-log-p-2/8`: logarithmic (fast start, slow finish)

See [Curves](/concepts/curves) for how each curve behaves.

Every padding and margin utility also works with any built-in Tailwind variant:

```html
<div class="md:f6y-p-4/8"></div>           <!-- Only on medium screens and up -->
<div class="hover:f6y-m-2/6"></div>        <!-- On hover -->
<div class="dark:f6y-p-2/8"></div>         <!-- In dark mode -->
<div class="focus:f6y-pl-1/4"></div>       <!-- On focus -->
```

Variants stack and work as you'd expect with any other Tailwind utility.