import './Spacing.css'

## Examples

{/* {$pf} */}

### Margin


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Padding


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Combined


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

## Documentation

### Overview

[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-m-sm-on-lg`

### Margin properties

| Abbreviation | Property |
| -- | -- |
| `m` |  margin |
| `mt` | margin-top |
| `mr` | margin-right |
| `mb` | margin-bottom |
| `ml` | margin-left |
| `mx` | margin-left & margin-right |
| `my` | margin-top & margin-bottom |

### Padding properties

| Abbreviation | Property |
| -- | -- |
| `p` |  padding |
| `pt` | padding-top |
| `pr` | padding-right |
| `pb` | padding-bottom |
| `pl` | padding-left |
| `px` | padding-left & padding-right |
| `py` | padding-top & padding-bottom |

### Size values

| Abbreviation | Property |
| -- | -- |
| `auto` |  auto |
| `0` | 0 |
| `xs` | var(--pf-v6-global--spacer--xs) |
| `sm` | var(--pf-v6-global--spacer--sm) |
| `md` | var(--pf-v6-global--spacer--md) |
| `lg` | var(--pf-v6-global--spacer--lg) |
| `xl` | var(--pf-v6-global--spacer--xl) |
| `2xl` | var(--pf-v6-global--spacer--2xl) |
| `3xl` | var(--pf-v6-global--spacer--3xl) |
| `4xl` | var(--pf-v6-global--spacer--4xl) |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-u-{m, mt, mr, mb, ml, mx, my}-{size}{-on-[breakpoint]}`  | `*` |  Sets margin top, right, bottom, left, margin-left & right, margin-top & bottom to spacer value |
| `.pf-v6-u-{p, pt, pr, pb, pl, px, py}-{size}{-on-[breakpoint]}`  | `*` |  Sets padding top, right, bottom, left, padding-left & right, padding-top & bottom to spacer value |