PatternFly

Spacing

Examples

Margin

Margin, marginX, marginY

Margin - xl
Margin x axis - pf-v5-u-mx-xl
Margin y axis - pf-v5-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

Padding, paddingX, paddingY

Padding - xl
Padding x axis - pf-v5-u-px-xl
Padding y axis - pf-v5-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

Combined spacers

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

Combined spacers (responsive)

Item 1
Item 2
Item 3

Documentation

Overview

Breakpoint is optional. Breakpoints: base (no breakpoint value), -on-sm, -on-md, -on-lg, and -on-xl. Example .pf-v5-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-v5-global--spacer--xs)
sm
var(--pf-v5-global--spacer--sm)
md
var(--pf-v5-global--spacer--md)
lg
var(--pf-v5-global--spacer--lg)
xl
var(--pf-v5-global--spacer--xl)
2xl
var(--pf-v5-global--spacer--2xl)
3xl
var(--pf-v5-global--spacer--3xl)
4xl
var(--pf-v5-global--spacer--4xl)

Usage

Class
Applied to
Outcome
.pf-v5-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-v5-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

View source on GitHub