package.docs.utilities.Spacing.examples.Spacing.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Spacing
section: utility-classes
pf: 'test'
---import './Spacing.css'

## Examples



### Margin

```html
Margin, marginX, marginY

  Margin - xl
  Margin x axis - pf-v6-u-mx-xl
  Margin y axis - pf-v6-u-my-xl



Margin top, margin right, margin bottom, margin left

  Margin-top - xl
  Margin-right - xl
  Margin-bottom - xl
  Margin-left - xl



Responsive margin

  Margin-top - xl
  Margin-top - xl on-sm
  Margin-top - xl on-md
  Margin-top - xl on-lg
  Margin-top - xl on-xl


```

### Padding

```html
Padding, paddingX, paddingY

  Padding - xl
  Padding x axis - pf-v6-u-px-xl
  Padding y axis - pf-v6-u-py-xl



Padding top, padding right, padding bottom, padding left

  Padding-top - xl
  Padding-right - xl
  Padding-bottom - xl
  Padding-left - xl



Responsive padding

  Padding-top
  Padding-top - xl on-sm
  Padding-top - xl on-md
  Padding-top - xl on-lg
  Padding-top - xl on-xl


```

### Combined

```html
Combined spacers

  Padding lg, margin lg
  Padding lg on-lg, margin lg



Combined spacers (responsive)

  Item 1
  Item 2
  Item 3


```

## Documentation

### Overview

[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: 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 |