---
title: Spacing
description: Style properties for controlling the padding of an element.
---

Padding and margin utilities reference the `spacing` token category. The `{Start|End}` variants map to logical
properties that follow the text direction.

## Padding

```jsx
<div className={css({ padding: '4' })} />
<div className={css({ p: '4' })} /> // shorthand
```

| Prop                  | CSS Property           | Token Category |
| --------------------- | ---------------------- | -------------- |
| `p`,`padding`         | `padding`              | `spacing`      |
| `pl`, `paddingLeft`   | `padding-left`         | `spacing`      |
| `pr`, `paddingRight`  | `padding-right`        | `spacing`      |
| `pt`, `paddingTop`    | `padding-top`          | `spacing`      |
| `pb`, `paddingBottom` | `padding-bottom`       | `spacing`      |
| `px`, `paddingX`      | `padding-inline`       | `spacing`      |
| `py`, `paddingY`      | `padding-block`        | `spacing`      |
| `ps`, `paddingStart`  | `padding-inline-start` | `spacing`      |
| `pe`, `paddingEnd`    | `padding-inline-end`   | `spacing`      |

## Margin

```jsx
<div className={css({ margin: '5' })} />
<div className={css({ m: '5' })} /> // shorthand
```

| Prop                 | CSS Property          | Token Category |
| -------------------- | --------------------- | -------------- |
| `m`,`margin`         | `margin`              | `spacing`      |
| `ml`, `marginLeft`   | `margin-left`         | `spacing`      |
| `mr`, `marginRight`  | `margin-right`        | `spacing`      |
| `mt`, `marginTop`    | `margin-top`          | `spacing`      |
| `mb`, `marginBottom` | `margin-bottom`       | `spacing`      |
| `mx`, `marginX`      | `margin-inline`       | `spacing`      |
| `my`, `marginY`      | `margin-block`        | `spacing`      |
| `ms`, `marginStart`  | `margin-inline-start` | `spacing`      |
| `me`, `marginEnd`    | `margin-inline-end`   | `spacing`      |
