Examples
Margin
Margin, marginX, marginY
Margin - xl
Margin x axis - pf-u-mx-xl
Margin y axis - pf-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-u-px-xl
Padding y axis - pf-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-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-global--spacer--xs) |
sm | var(--pf-global--spacer--sm) |
md | var(--pf-global--spacer--md) |
lg | var(--pf-global--spacer--lg) |
xl | var(--pf-global--spacer--xl) |
2xl | var(--pf-global--spacer--2xl) |
3xl | var(--pf-global--spacer--3xl) |
4xl | var(--pf-global--spacer--4xl) |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-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-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