Spacing

Margin

Utilities for controlling an element's margin.

Class

Properties

m-10xl

margin: var(--spacing-10xl) !important

m-11xl

margin: var(--spacing-11xl) !important

m-12xl

margin: var(--spacing-12xl) !important

m-13xl

margin: var(--spacing-13xl) !important

m-14xl

margin: var(--spacing-14xl) !important

m-15xl

margin: var(--spacing-15xl) !important

m-16xl

margin: var(--spacing-16xl) !important

m-17xl

margin: var(--spacing-17xl) !important

m-18xl

margin: var(--spacing-18xl) !important

m-19xl

margin: var(--spacing-19xl) !important

m-20xl

margin: var(--spacing-20xl) !important

m-21xl

margin: var(--spacing-21xl) !important

m-22xl

margin: var(--spacing-22xl) !important

m-23xl

margin: var(--spacing-23xl) !important

m-24xl

margin: var(--spacing-24xl) !important

m-25xl

margin: var(--spacing-25xl) !important

m-26xl

margin: var(--spacing-26xl) !important

m-27xl

margin: var(--spacing-27xl) !important

m-3xl

margin: var(--spacing-3xl) !important

m-3xs

margin: var(--spacing-3xs) !important

m-4xl

margin: var(--spacing-4xl) !important

m-5xl

margin: var(--spacing-5xl) !important

m-6xl

margin: var(--spacing-6xl) !important

m-7xl

margin: var(--spacing-7xl) !important

m-8xl

margin: var(--spacing-8xl) !important

m-9xl

margin: var(--spacing-9xl) !important

m-l

margin: var(--spacing-l) !important

m-m

margin: var(--spacing-m) !important

m-none

margin: var(--spacing-none) !important

m-s

margin: var(--spacing-s) !important

m-xl

margin: var(--spacing-xl) !important

m-xs

margin: var(--spacing-xs) !important

m-xxl

margin: var(--spacing-xxl) !important

m-xxs

margin: var(--spacing-xxs) !important

m-auto

margin: auto !important

mx-10xl

margin-left: var(--spacing-10xl) !important

margin-right: var(--spacing-10xl) !important

mx-11xl

margin-left: var(--spacing-11xl) !important

margin-right: var(--spacing-11xl) !important

mx-12xl

margin-left: var(--spacing-12xl) !important

margin-right: var(--spacing-12xl) !important

mx-13xl

margin-left: var(--spacing-13xl) !important

margin-right: var(--spacing-13xl) !important

mx-14xl

margin-left: var(--spacing-14xl) !important

margin-right: var(--spacing-14xl) !important

mx-15xl

margin-left: var(--spacing-15xl) !important

margin-right: var(--spacing-15xl) !important

mx-16xl

margin-left: var(--spacing-16xl) !important

margin-right: var(--spacing-16xl) !important

mx-17xl

margin-left: var(--spacing-17xl) !important

margin-right: var(--spacing-17xl) !important

mx-18xl

margin-left: var(--spacing-18xl) !important

margin-right: var(--spacing-18xl) !important

mx-19xl

margin-left: var(--spacing-19xl) !important

margin-right: var(--spacing-19xl) !important

mx-20xl

margin-left: var(--spacing-20xl) !important

margin-right: var(--spacing-20xl) !important

mx-21xl

margin-left: var(--spacing-21xl) !important

margin-right: var(--spacing-21xl) !important

mx-22xl

margin-left: var(--spacing-22xl) !important

margin-right: var(--spacing-22xl) !important

mx-23xl

margin-left: var(--spacing-23xl) !important

margin-right: var(--spacing-23xl) !important

mx-24xl

margin-left: var(--spacing-24xl) !important

margin-right: var(--spacing-24xl) !important

mx-25xl

margin-left: var(--spacing-25xl) !important

margin-right: var(--spacing-25xl) !important

mx-26xl

margin-left: var(--spacing-26xl) !important

margin-right: var(--spacing-26xl) !important

mx-27xl

margin-left: var(--spacing-27xl) !important

margin-right: var(--spacing-27xl) !important

mx-3xl

margin-left: var(--spacing-3xl) !important

margin-right: var(--spacing-3xl) !important

mx-3xs

margin-left: var(--spacing-3xs) !important

margin-right: var(--spacing-3xs) !important

mx-4xl

margin-left: var(--spacing-4xl) !important

margin-right: var(--spacing-4xl) !important

mx-5xl

margin-left: var(--spacing-5xl) !important

margin-right: var(--spacing-5xl) !important

mx-6xl

margin-left: var(--spacing-6xl) !important

margin-right: var(--spacing-6xl) !important

mx-7xl

margin-left: var(--spacing-7xl) !important

margin-right: var(--spacing-7xl) !important

mx-8xl

margin-left: var(--spacing-8xl) !important

margin-right: var(--spacing-8xl) !important

mx-9xl

margin-left: var(--spacing-9xl) !important

margin-right: var(--spacing-9xl) !important

mx-l

margin-left: var(--spacing-l) !important

margin-right: var(--spacing-l) !important

mx-m

margin-left: var(--spacing-m) !important

margin-right: var(--spacing-m) !important

mx-none

margin-left: var(--spacing-none) !important

margin-right: var(--spacing-none) !important

mx-s

margin-left: var(--spacing-s) !important

margin-right: var(--spacing-s) !important

mx-xl

margin-left: var(--spacing-xl) !important

margin-right: var(--spacing-xl) !important

mx-xs

margin-left: var(--spacing-xs) !important

margin-right: var(--spacing-xs) !important

mx-xxl

margin-left: var(--spacing-xxl) !important

margin-right: var(--spacing-xxl) !important

mx-xxs

margin-left: var(--spacing-xxs) !important

margin-right: var(--spacing-xxs) !important

my-10xl

margin-top: var(--spacing-10xl) !important

margin-bottom: var(--spacing-10xl) !important

my-11xl

margin-top: var(--spacing-11xl) !important

margin-bottom: var(--spacing-11xl) !important

my-12xl

margin-top: var(--spacing-12xl) !important

margin-bottom: var(--spacing-12xl) !important

my-13xl

margin-top: var(--spacing-13xl) !important

margin-bottom: var(--spacing-13xl) !important

my-14xl

margin-top: var(--spacing-14xl) !important

margin-bottom: var(--spacing-14xl) !important

my-15xl

margin-top: var(--spacing-15xl) !important

margin-bottom: var(--spacing-15xl) !important

my-16xl

margin-top: var(--spacing-16xl) !important

margin-bottom: var(--spacing-16xl) !important

my-17xl

margin-top: var(--spacing-17xl) !important

margin-bottom: var(--spacing-17xl) !important

my-18xl

margin-top: var(--spacing-18xl) !important

margin-bottom: var(--spacing-18xl) !important

my-19xl

margin-top: var(--spacing-19xl) !important

margin-bottom: var(--spacing-19xl) !important

my-20xl

margin-top: var(--spacing-20xl) !important

margin-bottom: var(--spacing-20xl) !important

my-21xl

margin-top: var(--spacing-21xl) !important

margin-bottom: var(--spacing-21xl) !important

my-22xl

margin-top: var(--spacing-22xl) !important

margin-bottom: var(--spacing-22xl) !important

my-23xl

margin-top: var(--spacing-23xl) !important

margin-bottom: var(--spacing-23xl) !important

my-24xl

margin-top: var(--spacing-24xl) !important

margin-bottom: var(--spacing-24xl) !important

my-25xl

margin-top: var(--spacing-25xl) !important

margin-bottom: var(--spacing-25xl) !important

my-26xl

margin-top: var(--spacing-26xl) !important

margin-bottom: var(--spacing-26xl) !important

my-27xl

margin-top: var(--spacing-27xl) !important

margin-bottom: var(--spacing-27xl) !important

my-3xl

margin-top: var(--spacing-3xl) !important

margin-bottom: var(--spacing-3xl) !important

my-3xs

margin-top: var(--spacing-3xs) !important

margin-bottom: var(--spacing-3xs) !important

my-4xl

margin-top: var(--spacing-4xl) !important

margin-bottom: var(--spacing-4xl) !important

my-5xl

margin-top: var(--spacing-5xl) !important

margin-bottom: var(--spacing-5xl) !important

my-6xl

margin-top: var(--spacing-6xl) !important

margin-bottom: var(--spacing-6xl) !important

my-7xl

margin-top: var(--spacing-7xl) !important

margin-bottom: var(--spacing-7xl) !important

my-8xl

margin-top: var(--spacing-8xl) !important

margin-bottom: var(--spacing-8xl) !important

my-9xl

margin-top: var(--spacing-9xl) !important

margin-bottom: var(--spacing-9xl) !important

my-l

margin-top: var(--spacing-l) !important

margin-bottom: var(--spacing-l) !important

my-m

margin-top: var(--spacing-m) !important

margin-bottom: var(--spacing-m) !important

my-none

margin-top: var(--spacing-none) !important

margin-bottom: var(--spacing-none) !important

my-s

margin-top: var(--spacing-s) !important

margin-bottom: var(--spacing-s) !important

my-xl

margin-top: var(--spacing-xl) !important

margin-bottom: var(--spacing-xl) !important

my-xs

margin-top: var(--spacing-xs) !important

margin-bottom: var(--spacing-xs) !important

my-xxl

margin-top: var(--spacing-xxl) !important

margin-bottom: var(--spacing-xxl) !important

my-xxs

margin-top: var(--spacing-xxs) !important

margin-bottom: var(--spacing-xxs) !important

mx-auto

margin-left: auto !important

margin-right: auto !important

my-auto

margin-top: auto !important

margin-bottom: auto !important

mb-10xl

margin-bottom: var(--spacing-10xl) !important

mb-11xl

margin-bottom: var(--spacing-11xl) !important

mb-12xl

margin-bottom: var(--spacing-12xl) !important

mb-13xl

margin-bottom: var(--spacing-13xl) !important

mb-14xl

margin-bottom: var(--spacing-14xl) !important

mb-15xl

margin-bottom: var(--spacing-15xl) !important

mb-16xl

margin-bottom: var(--spacing-16xl) !important

mb-17xl

margin-bottom: var(--spacing-17xl) !important

mb-18xl

margin-bottom: var(--spacing-18xl) !important

mb-19xl

margin-bottom: var(--spacing-19xl) !important

mb-20xl

margin-bottom: var(--spacing-20xl) !important

mb-21xl

margin-bottom: var(--spacing-21xl) !important

mb-22xl

margin-bottom: var(--spacing-22xl) !important

mb-23xl

margin-bottom: var(--spacing-23xl) !important

mb-24xl

margin-bottom: var(--spacing-24xl) !important

mb-25xl

margin-bottom: var(--spacing-25xl) !important

mb-26xl

margin-bottom: var(--spacing-26xl) !important

mb-27xl

margin-bottom: var(--spacing-27xl) !important

mb-3xl

margin-bottom: var(--spacing-3xl) !important

mb-3xs

margin-bottom: var(--spacing-3xs) !important

mb-4xl

margin-bottom: var(--spacing-4xl) !important

mb-5xl

margin-bottom: var(--spacing-5xl) !important

mb-6xl

margin-bottom: var(--spacing-6xl) !important

mb-7xl

margin-bottom: var(--spacing-7xl) !important

mb-8xl

margin-bottom: var(--spacing-8xl) !important

mb-9xl

margin-bottom: var(--spacing-9xl) !important

mb-l

margin-bottom: var(--spacing-l) !important

mb-m

margin-bottom: var(--spacing-m) !important

mb-none

margin-bottom: var(--spacing-none) !important

mb-s

margin-bottom: var(--spacing-s) !important

mb-xl

margin-bottom: var(--spacing-xl) !important

mb-xs

margin-bottom: var(--spacing-xs) !important

mb-xxl

margin-bottom: var(--spacing-xxl) !important

mb-xxs

margin-bottom: var(--spacing-xxs) !important

me-10xl

margin-inline-end: var(--spacing-10xl) !important

me-11xl

margin-inline-end: var(--spacing-11xl) !important

me-12xl

margin-inline-end: var(--spacing-12xl) !important

me-13xl

margin-inline-end: var(--spacing-13xl) !important

me-14xl

margin-inline-end: var(--spacing-14xl) !important

me-15xl

margin-inline-end: var(--spacing-15xl) !important

me-16xl

margin-inline-end: var(--spacing-16xl) !important

me-17xl

margin-inline-end: var(--spacing-17xl) !important

me-18xl

margin-inline-end: var(--spacing-18xl) !important

me-19xl

margin-inline-end: var(--spacing-19xl) !important

me-20xl

margin-inline-end: var(--spacing-20xl) !important

me-21xl

margin-inline-end: var(--spacing-21xl) !important

me-22xl

margin-inline-end: var(--spacing-22xl) !important

me-23xl

margin-inline-end: var(--spacing-23xl) !important

me-24xl

margin-inline-end: var(--spacing-24xl) !important

me-25xl

margin-inline-end: var(--spacing-25xl) !important

me-26xl

margin-inline-end: var(--spacing-26xl) !important

me-27xl

margin-inline-end: var(--spacing-27xl) !important

me-3xl

margin-inline-end: var(--spacing-3xl) !important

me-3xs

margin-inline-end: var(--spacing-3xs) !important

me-4xl

margin-inline-end: var(--spacing-4xl) !important

me-5xl

margin-inline-end: var(--spacing-5xl) !important

me-6xl

margin-inline-end: var(--spacing-6xl) !important

me-7xl

margin-inline-end: var(--spacing-7xl) !important

me-8xl

margin-inline-end: var(--spacing-8xl) !important

me-9xl

margin-inline-end: var(--spacing-9xl) !important

me-l

margin-inline-end: var(--spacing-l) !important

me-m

margin-inline-end: var(--spacing-m) !important

me-none

margin-inline-end: var(--spacing-none) !important

me-s

margin-inline-end: var(--spacing-s) !important

me-xl

margin-inline-end: var(--spacing-xl) !important

me-xs

margin-inline-end: var(--spacing-xs) !important

me-xxl

margin-inline-end: var(--spacing-xxl) !important

me-xxs

margin-inline-end: var(--spacing-xxs) !important

ml-10xl

margin-left: var(--spacing-10xl) !important

ml-11xl

margin-left: var(--spacing-11xl) !important

ml-12xl

margin-left: var(--spacing-12xl) !important

ml-13xl

margin-left: var(--spacing-13xl) !important

ml-14xl

margin-left: var(--spacing-14xl) !important

ml-15xl

margin-left: var(--spacing-15xl) !important

ml-16xl

margin-left: var(--spacing-16xl) !important

ml-17xl

margin-left: var(--spacing-17xl) !important

ml-18xl

margin-left: var(--spacing-18xl) !important

ml-19xl

margin-left: var(--spacing-19xl) !important

ml-20xl

margin-left: var(--spacing-20xl) !important

ml-21xl

margin-left: var(--spacing-21xl) !important

ml-22xl

margin-left: var(--spacing-22xl) !important

ml-23xl

margin-left: var(--spacing-23xl) !important

ml-24xl

margin-left: var(--spacing-24xl) !important

ml-25xl

margin-left: var(--spacing-25xl) !important

ml-26xl

margin-left: var(--spacing-26xl) !important

ml-27xl

margin-left: var(--spacing-27xl) !important

ml-3xl

margin-left: var(--spacing-3xl) !important

ml-3xs

margin-left: var(--spacing-3xs) !important

ml-4xl

margin-left: var(--spacing-4xl) !important

ml-5xl

margin-left: var(--spacing-5xl) !important

ml-6xl

margin-left: var(--spacing-6xl) !important

ml-7xl

margin-left: var(--spacing-7xl) !important

ml-8xl

margin-left: var(--spacing-8xl) !important

ml-9xl

margin-left: var(--spacing-9xl) !important

ml-l

margin-left: var(--spacing-l) !important

ml-m

margin-left: var(--spacing-m) !important

ml-none

margin-left: var(--spacing-none) !important

ml-s

margin-left: var(--spacing-s) !important

ml-xl

margin-left: var(--spacing-xl) !important

ml-xs

margin-left: var(--spacing-xs) !important

ml-xxl

margin-left: var(--spacing-xxl) !important

ml-xxs

margin-left: var(--spacing-xxs) !important

mr-10xl

margin-right: var(--spacing-10xl) !important

mr-11xl

margin-right: var(--spacing-11xl) !important

mr-12xl

margin-right: var(--spacing-12xl) !important

mr-13xl

margin-right: var(--spacing-13xl) !important

mr-14xl

margin-right: var(--spacing-14xl) !important

mr-15xl

margin-right: var(--spacing-15xl) !important

mr-16xl

margin-right: var(--spacing-16xl) !important

mr-17xl

margin-right: var(--spacing-17xl) !important

mr-18xl

margin-right: var(--spacing-18xl) !important

mr-19xl

margin-right: var(--spacing-19xl) !important

mr-20xl

margin-right: var(--spacing-20xl) !important

mr-21xl

margin-right: var(--spacing-21xl) !important

mr-22xl

margin-right: var(--spacing-22xl) !important

mr-23xl

margin-right: var(--spacing-23xl) !important

mr-24xl

margin-right: var(--spacing-24xl) !important

mr-25xl

margin-right: var(--spacing-25xl) !important

mr-26xl

margin-right: var(--spacing-26xl) !important

mr-27xl

margin-right: var(--spacing-27xl) !important

mr-3xl

margin-right: var(--spacing-3xl) !important

mr-3xs

margin-right: var(--spacing-3xs) !important

mr-4xl

margin-right: var(--spacing-4xl) !important

mr-5xl

margin-right: var(--spacing-5xl) !important

mr-6xl

margin-right: var(--spacing-6xl) !important

mr-7xl

margin-right: var(--spacing-7xl) !important

mr-8xl

margin-right: var(--spacing-8xl) !important

mr-9xl

margin-right: var(--spacing-9xl) !important

mr-l

margin-right: var(--spacing-l) !important

mr-m

margin-right: var(--spacing-m) !important

mr-none

margin-right: var(--spacing-none) !important

mr-s

margin-right: var(--spacing-s) !important

mr-xl

margin-right: var(--spacing-xl) !important

mr-xs

margin-right: var(--spacing-xs) !important

mr-xxl

margin-right: var(--spacing-xxl) !important

mr-xxs

margin-right: var(--spacing-xxs) !important

ms-10xl

margin-inline-start: var(--spacing-10xl) !important

ms-11xl

margin-inline-start: var(--spacing-11xl) !important

ms-12xl

margin-inline-start: var(--spacing-12xl) !important

ms-13xl

margin-inline-start: var(--spacing-13xl) !important

ms-14xl

margin-inline-start: var(--spacing-14xl) !important

ms-15xl

margin-inline-start: var(--spacing-15xl) !important

ms-16xl

margin-inline-start: var(--spacing-16xl) !important

ms-17xl

margin-inline-start: var(--spacing-17xl) !important

ms-18xl

margin-inline-start: var(--spacing-18xl) !important

ms-19xl

margin-inline-start: var(--spacing-19xl) !important

ms-20xl

margin-inline-start: var(--spacing-20xl) !important

ms-21xl

margin-inline-start: var(--spacing-21xl) !important

ms-22xl

margin-inline-start: var(--spacing-22xl) !important

ms-23xl

margin-inline-start: var(--spacing-23xl) !important

ms-24xl

margin-inline-start: var(--spacing-24xl) !important

ms-25xl

margin-inline-start: var(--spacing-25xl) !important

ms-26xl

margin-inline-start: var(--spacing-26xl) !important

ms-27xl

margin-inline-start: var(--spacing-27xl) !important

ms-3xl

margin-inline-start: var(--spacing-3xl) !important

ms-3xs

margin-inline-start: var(--spacing-3xs) !important

ms-4xl

margin-inline-start: var(--spacing-4xl) !important

ms-5xl

margin-inline-start: var(--spacing-5xl) !important

ms-6xl

margin-inline-start: var(--spacing-6xl) !important

ms-7xl

margin-inline-start: var(--spacing-7xl) !important

ms-8xl

margin-inline-start: var(--spacing-8xl) !important

ms-9xl

margin-inline-start: var(--spacing-9xl) !important

ms-l

margin-inline-start: var(--spacing-l) !important

ms-m

margin-inline-start: var(--spacing-m) !important

ms-none

margin-inline-start: var(--spacing-none) !important

ms-s

margin-inline-start: var(--spacing-s) !important

ms-xl

margin-inline-start: var(--spacing-xl) !important

ms-xs

margin-inline-start: var(--spacing-xs) !important

ms-xxl

margin-inline-start: var(--spacing-xxl) !important

ms-xxs

margin-inline-start: var(--spacing-xxs) !important

mt-10xl

margin-top: var(--spacing-10xl) !important

mt-11xl

margin-top: var(--spacing-11xl) !important

mt-12xl

margin-top: var(--spacing-12xl) !important

mt-13xl

margin-top: var(--spacing-13xl) !important

mt-14xl

margin-top: var(--spacing-14xl) !important

mt-15xl

margin-top: var(--spacing-15xl) !important

mt-16xl

margin-top: var(--spacing-16xl) !important

mt-17xl

margin-top: var(--spacing-17xl) !important

mt-18xl

margin-top: var(--spacing-18xl) !important

mt-19xl

margin-top: var(--spacing-19xl) !important

mt-20xl

margin-top: var(--spacing-20xl) !important

mt-21xl

margin-top: var(--spacing-21xl) !important

mt-22xl

margin-top: var(--spacing-22xl) !important

mt-23xl

margin-top: var(--spacing-23xl) !important

mt-24xl

margin-top: var(--spacing-24xl) !important

mt-25xl

margin-top: var(--spacing-25xl) !important

mt-26xl

margin-top: var(--spacing-26xl) !important

mt-27xl

margin-top: var(--spacing-27xl) !important

mt-3xl

margin-top: var(--spacing-3xl) !important

mt-3xs

margin-top: var(--spacing-3xs) !important

mt-4xl

margin-top: var(--spacing-4xl) !important

mt-5xl

margin-top: var(--spacing-5xl) !important

mt-6xl

margin-top: var(--spacing-6xl) !important

mt-7xl

margin-top: var(--spacing-7xl) !important

mt-8xl

margin-top: var(--spacing-8xl) !important

mt-9xl

margin-top: var(--spacing-9xl) !important

mt-l

margin-top: var(--spacing-l) !important

mt-m

margin-top: var(--spacing-m) !important

mt-none

margin-top: var(--spacing-none) !important

mt-s

margin-top: var(--spacing-s) !important

mt-xl

margin-top: var(--spacing-xl) !important

mt-xs

margin-top: var(--spacing-xs) !important

mt-xxl

margin-top: var(--spacing-xxl) !important

mt-xxs

margin-top: var(--spacing-xxs) !important

mb-auto

margin-bottom: auto !important

me-auto

margin-inline-end: auto !important

ml-auto

margin-left: auto !important

mr-auto

margin-right: auto !important

ms-auto

margin-inline-start: auto !important

mt-auto

margin-top: auto !important

Add margin to a single side

Control the margin on one side of an element using the m{t|r|b|l}-{size} utilities.

mt-xl

mr-3xl

mb-m

ml-5xl

<div className="mt-xl">mt-xl</div>
<div className="mr-3xl">mr-3xl</div>
<div className="mb-m">mb-m</div>
<div className="ml-5xl">ml-5xl</div>

Add horizontal margin

Control the horizontal margin of an element using the mx-{size} utilities.

mx-xl

<div className="mx-xl">mx-xl</div>

Add vertical margin

Control the vertical margin of an element using the my-{size} utilities.

my-xl

<div className="my-xl">my-xl</div>

Add margin to all sides

Control the margin on all sides of an element using the m-{size} utilities.

m-xl

<div className="p-ml">m-xl</div>

Padding

Utilities for controlling an element's padding.

Class

Properties

p-10xl

padding: var(--spacing-10xl) !important

p-11xl

padding: var(--spacing-11xl) !important

p-12xl

padding: var(--spacing-12xl) !important

p-13xl

padding: var(--spacing-13xl) !important

p-14xl

padding: var(--spacing-14xl) !important

p-15xl

padding: var(--spacing-15xl) !important

p-16xl

padding: var(--spacing-16xl) !important

p-17xl

padding: var(--spacing-17xl) !important

p-18xl

padding: var(--spacing-18xl) !important

p-19xl

padding: var(--spacing-19xl) !important

p-20xl

padding: var(--spacing-20xl) !important

p-21xl

padding: var(--spacing-21xl) !important

p-22xl

padding: var(--spacing-22xl) !important

p-23xl

padding: var(--spacing-23xl) !important

p-24xl

padding: var(--spacing-24xl) !important

p-25xl

padding: var(--spacing-25xl) !important

p-26xl

padding: var(--spacing-26xl) !important

p-27xl

padding: var(--spacing-27xl) !important

p-3xl

padding: var(--spacing-3xl) !important

p-3xs

padding: var(--spacing-3xs) !important

p-4xl

padding: var(--spacing-4xl) !important

p-5xl

padding: var(--spacing-5xl) !important

p-6xl

padding: var(--spacing-6xl) !important

p-7xl

padding: var(--spacing-7xl) !important

p-8xl

padding: var(--spacing-8xl) !important

p-9xl

padding: var(--spacing-9xl) !important

p-l

padding: var(--spacing-l) !important

p-m

padding: var(--spacing-m) !important

p-none

padding: var(--spacing-none) !important

p-s

padding: var(--spacing-s) !important

p-xl

padding: var(--spacing-xl) !important

p-xs

padding: var(--spacing-xs) !important

p-xxl

padding: var(--spacing-xxl) !important

p-xxs

padding: var(--spacing-xxs) !important

px-10xl

padding-left: var(--spacing-10xl) !important

padding-right: var(--spacing-10xl) !important

px-11xl

padding-left: var(--spacing-11xl) !important

padding-right: var(--spacing-11xl) !important

px-12xl

padding-left: var(--spacing-12xl) !important

padding-right: var(--spacing-12xl) !important

px-13xl

padding-left: var(--spacing-13xl) !important

padding-right: var(--spacing-13xl) !important

px-14xl

padding-left: var(--spacing-14xl) !important

padding-right: var(--spacing-14xl) !important

px-15xl

padding-left: var(--spacing-15xl) !important

padding-right: var(--spacing-15xl) !important

px-16xl

padding-left: var(--spacing-16xl) !important

padding-right: var(--spacing-16xl) !important

px-17xl

padding-left: var(--spacing-17xl) !important

padding-right: var(--spacing-17xl) !important

px-18xl

padding-left: var(--spacing-18xl) !important

padding-right: var(--spacing-18xl) !important

px-19xl

padding-left: var(--spacing-19xl) !important

padding-right: var(--spacing-19xl) !important

px-20xl

padding-left: var(--spacing-20xl) !important

padding-right: var(--spacing-20xl) !important

px-21xl

padding-left: var(--spacing-21xl) !important

padding-right: var(--spacing-21xl) !important

px-22xl

padding-left: var(--spacing-22xl) !important

padding-right: var(--spacing-22xl) !important

px-23xl

padding-left: var(--spacing-23xl) !important

padding-right: var(--spacing-23xl) !important

px-24xl

padding-left: var(--spacing-24xl) !important

padding-right: var(--spacing-24xl) !important

px-25xl

padding-left: var(--spacing-25xl) !important

padding-right: var(--spacing-25xl) !important

px-26xl

padding-left: var(--spacing-26xl) !important

padding-right: var(--spacing-26xl) !important

px-27xl

padding-left: var(--spacing-27xl) !important

padding-right: var(--spacing-27xl) !important

px-3xl

padding-left: var(--spacing-3xl) !important

padding-right: var(--spacing-3xl) !important

px-3xs

padding-left: var(--spacing-3xs) !important

padding-right: var(--spacing-3xs) !important

px-4xl

padding-left: var(--spacing-4xl) !important

padding-right: var(--spacing-4xl) !important

px-5xl

padding-left: var(--spacing-5xl) !important

padding-right: var(--spacing-5xl) !important

px-6xl

padding-left: var(--spacing-6xl) !important

padding-right: var(--spacing-6xl) !important

px-7xl

padding-left: var(--spacing-7xl) !important

padding-right: var(--spacing-7xl) !important

px-8xl

padding-left: var(--spacing-8xl) !important

padding-right: var(--spacing-8xl) !important

px-9xl

padding-left: var(--spacing-9xl) !important

padding-right: var(--spacing-9xl) !important

px-l

padding-left: var(--spacing-l) !important

padding-right: var(--spacing-l) !important

px-m

padding-left: var(--spacing-m) !important

padding-right: var(--spacing-m) !important

px-none

padding-left: var(--spacing-none) !important

padding-right: var(--spacing-none) !important

px-s

padding-left: var(--spacing-s) !important

padding-right: var(--spacing-s) !important

px-xl

padding-left: var(--spacing-xl) !important

padding-right: var(--spacing-xl) !important

px-xs

padding-left: var(--spacing-xs) !important

padding-right: var(--spacing-xs) !important

px-xxl

padding-left: var(--spacing-xxl) !important

padding-right: var(--spacing-xxl) !important

px-xxs

padding-left: var(--spacing-xxs) !important

padding-right: var(--spacing-xxs) !important

py-10xl

padding-top: var(--spacing-10xl) !important

padding-bottom: var(--spacing-10xl) !important

py-11xl

padding-top: var(--spacing-11xl) !important

padding-bottom: var(--spacing-11xl) !important

py-12xl

padding-top: var(--spacing-12xl) !important

padding-bottom: var(--spacing-12xl) !important

py-13xl

padding-top: var(--spacing-13xl) !important

padding-bottom: var(--spacing-13xl) !important

py-14xl

padding-top: var(--spacing-14xl) !important

padding-bottom: var(--spacing-14xl) !important

py-15xl

padding-top: var(--spacing-15xl) !important

padding-bottom: var(--spacing-15xl) !important

py-16xl

padding-top: var(--spacing-16xl) !important

padding-bottom: var(--spacing-16xl) !important

py-17xl

padding-top: var(--spacing-17xl) !important

padding-bottom: var(--spacing-17xl) !important

py-18xl

padding-top: var(--spacing-18xl) !important

padding-bottom: var(--spacing-18xl) !important

py-19xl

padding-top: var(--spacing-19xl) !important

padding-bottom: var(--spacing-19xl) !important

py-20xl

padding-top: var(--spacing-20xl) !important

padding-bottom: var(--spacing-20xl) !important

py-21xl

padding-top: var(--spacing-21xl) !important

padding-bottom: var(--spacing-21xl) !important

py-22xl

padding-top: var(--spacing-22xl) !important

padding-bottom: var(--spacing-22xl) !important

py-23xl

padding-top: var(--spacing-23xl) !important

padding-bottom: var(--spacing-23xl) !important

py-24xl

padding-top: var(--spacing-24xl) !important

padding-bottom: var(--spacing-24xl) !important

py-25xl

padding-top: var(--spacing-25xl) !important

padding-bottom: var(--spacing-25xl) !important

py-26xl

padding-top: var(--spacing-26xl) !important

padding-bottom: var(--spacing-26xl) !important

py-27xl

padding-top: var(--spacing-27xl) !important

padding-bottom: var(--spacing-27xl) !important

py-3xl

padding-top: var(--spacing-3xl) !important

padding-bottom: var(--spacing-3xl) !important

py-3xs

padding-top: var(--spacing-3xs) !important

padding-bottom: var(--spacing-3xs) !important

py-4xl

padding-top: var(--spacing-4xl) !important

padding-bottom: var(--spacing-4xl) !important

py-5xl

padding-top: var(--spacing-5xl) !important

padding-bottom: var(--spacing-5xl) !important

py-6xl

padding-top: var(--spacing-6xl) !important

padding-bottom: var(--spacing-6xl) !important

py-7xl

padding-top: var(--spacing-7xl) !important

padding-bottom: var(--spacing-7xl) !important

py-8xl

padding-top: var(--spacing-8xl) !important

padding-bottom: var(--spacing-8xl) !important

py-9xl

padding-top: var(--spacing-9xl) !important

padding-bottom: var(--spacing-9xl) !important

py-l

padding-top: var(--spacing-l) !important

padding-bottom: var(--spacing-l) !important

py-m

padding-top: var(--spacing-m) !important

padding-bottom: var(--spacing-m) !important

py-none

padding-top: var(--spacing-none) !important

padding-bottom: var(--spacing-none) !important

py-s

padding-top: var(--spacing-s) !important

padding-bottom: var(--spacing-s) !important

py-xl

padding-top: var(--spacing-xl) !important

padding-bottom: var(--spacing-xl) !important

py-xs

padding-top: var(--spacing-xs) !important

padding-bottom: var(--spacing-xs) !important

py-xxl

padding-top: var(--spacing-xxl) !important

padding-bottom: var(--spacing-xxl) !important

py-xxs

padding-top: var(--spacing-xxs) !important

padding-bottom: var(--spacing-xxs) !important

pb-10xl

padding-bottom: var(--spacing-10xl) !important

pb-11xl

padding-bottom: var(--spacing-11xl) !important

pb-12xl

padding-bottom: var(--spacing-12xl) !important

pb-13xl

padding-bottom: var(--spacing-13xl) !important

pb-14xl

padding-bottom: var(--spacing-14xl) !important

pb-15xl

padding-bottom: var(--spacing-15xl) !important

pb-16xl

padding-bottom: var(--spacing-16xl) !important

pb-17xl

padding-bottom: var(--spacing-17xl) !important

pb-18xl

padding-bottom: var(--spacing-18xl) !important

pb-19xl

padding-bottom: var(--spacing-19xl) !important

pb-20xl

padding-bottom: var(--spacing-20xl) !important

pb-21xl

padding-bottom: var(--spacing-21xl) !important

pb-22xl

padding-bottom: var(--spacing-22xl) !important

pb-23xl

padding-bottom: var(--spacing-23xl) !important

pb-24xl

padding-bottom: var(--spacing-24xl) !important

pb-25xl

padding-bottom: var(--spacing-25xl) !important

pb-26xl

padding-bottom: var(--spacing-26xl) !important

pb-27xl

padding-bottom: var(--spacing-27xl) !important

pb-3xl

padding-bottom: var(--spacing-3xl) !important

pb-3xs

padding-bottom: var(--spacing-3xs) !important

pb-4xl

padding-bottom: var(--spacing-4xl) !important

pb-5xl

padding-bottom: var(--spacing-5xl) !important

pb-6xl

padding-bottom: var(--spacing-6xl) !important

pb-7xl

padding-bottom: var(--spacing-7xl) !important

pb-8xl

padding-bottom: var(--spacing-8xl) !important

pb-9xl

padding-bottom: var(--spacing-9xl) !important

pb-l

padding-bottom: var(--spacing-l) !important

pb-m

padding-bottom: var(--spacing-m) !important

pb-none

padding-bottom: var(--spacing-none) !important

pb-s

padding-bottom: var(--spacing-s) !important

pb-xl

padding-bottom: var(--spacing-xl) !important

pb-xs

padding-bottom: var(--spacing-xs) !important

pb-xxl

padding-bottom: var(--spacing-xxl) !important

pb-xxs

padding-bottom: var(--spacing-xxs) !important

pe-10xl

padding-inline-end: var(--spacing-10xl) !important

pe-11xl

padding-inline-end: var(--spacing-11xl) !important

pe-12xl

padding-inline-end: var(--spacing-12xl) !important

pe-13xl

padding-inline-end: var(--spacing-13xl) !important

pe-14xl

padding-inline-end: var(--spacing-14xl) !important

pe-15xl

padding-inline-end: var(--spacing-15xl) !important

pe-16xl

padding-inline-end: var(--spacing-16xl) !important

pe-17xl

padding-inline-end: var(--spacing-17xl) !important

pe-18xl

padding-inline-end: var(--spacing-18xl) !important

pe-19xl

padding-inline-end: var(--spacing-19xl) !important

pe-20xl

padding-inline-end: var(--spacing-20xl) !important

pe-21xl

padding-inline-end: var(--spacing-21xl) !important

pe-22xl

padding-inline-end: var(--spacing-22xl) !important

pe-23xl

padding-inline-end: var(--spacing-23xl) !important

pe-24xl

padding-inline-end: var(--spacing-24xl) !important

pe-25xl

padding-inline-end: var(--spacing-25xl) !important

pe-26xl

padding-inline-end: var(--spacing-26xl) !important

pe-27xl

padding-inline-end: var(--spacing-27xl) !important

pe-3xl

padding-inline-end: var(--spacing-3xl) !important

pe-3xs

padding-inline-end: var(--spacing-3xs) !important

pe-4xl

padding-inline-end: var(--spacing-4xl) !important

pe-5xl

padding-inline-end: var(--spacing-5xl) !important

pe-6xl

padding-inline-end: var(--spacing-6xl) !important

pe-7xl

padding-inline-end: var(--spacing-7xl) !important

pe-8xl

padding-inline-end: var(--spacing-8xl) !important

pe-9xl

padding-inline-end: var(--spacing-9xl) !important

pe-l

padding-inline-end: var(--spacing-l) !important

pe-m

padding-inline-end: var(--spacing-m) !important

pe-none

padding-inline-end: var(--spacing-none) !important

pe-s

padding-inline-end: var(--spacing-s) !important

pe-xl

padding-inline-end: var(--spacing-xl) !important

pe-xs

padding-inline-end: var(--spacing-xs) !important

pe-xxl

padding-inline-end: var(--spacing-xxl) !important

pe-xxs

padding-inline-end: var(--spacing-xxs) !important

pl-10xl

padding-left: var(--spacing-10xl) !important

pl-11xl

padding-left: var(--spacing-11xl) !important

pl-12xl

padding-left: var(--spacing-12xl) !important

pl-13xl

padding-left: var(--spacing-13xl) !important

pl-14xl

padding-left: var(--spacing-14xl) !important

pl-15xl

padding-left: var(--spacing-15xl) !important

pl-16xl

padding-left: var(--spacing-16xl) !important

pl-17xl

padding-left: var(--spacing-17xl) !important

pl-18xl

padding-left: var(--spacing-18xl) !important

pl-19xl

padding-left: var(--spacing-19xl) !important

pl-20xl

padding-left: var(--spacing-20xl) !important

pl-21xl

padding-left: var(--spacing-21xl) !important

pl-22xl

padding-left: var(--spacing-22xl) !important

pl-23xl

padding-left: var(--spacing-23xl) !important

pl-24xl

padding-left: var(--spacing-24xl) !important

pl-25xl

padding-left: var(--spacing-25xl) !important

pl-26xl

padding-left: var(--spacing-26xl) !important

pl-27xl

padding-left: var(--spacing-27xl) !important

pl-3xl

padding-left: var(--spacing-3xl) !important

pl-3xs

padding-left: var(--spacing-3xs) !important

pl-4xl

padding-left: var(--spacing-4xl) !important

pl-5xl

padding-left: var(--spacing-5xl) !important

pl-6xl

padding-left: var(--spacing-6xl) !important

pl-7xl

padding-left: var(--spacing-7xl) !important

pl-8xl

padding-left: var(--spacing-8xl) !important

pl-9xl

padding-left: var(--spacing-9xl) !important

pl-l

padding-left: var(--spacing-l) !important

pl-m

padding-left: var(--spacing-m) !important

pl-none

padding-left: var(--spacing-none) !important

pl-s

padding-left: var(--spacing-s) !important

pl-xl

padding-left: var(--spacing-xl) !important

pl-xs

padding-left: var(--spacing-xs) !important

pl-xxl

padding-left: var(--spacing-xxl) !important

pl-xxs

padding-left: var(--spacing-xxs) !important

pr-10xl

padding-right: var(--spacing-10xl) !important

pr-11xl

padding-right: var(--spacing-11xl) !important

pr-12xl

padding-right: var(--spacing-12xl) !important

pr-13xl

padding-right: var(--spacing-13xl) !important

pr-14xl

padding-right: var(--spacing-14xl) !important

pr-15xl

padding-right: var(--spacing-15xl) !important

pr-16xl

padding-right: var(--spacing-16xl) !important

pr-17xl

padding-right: var(--spacing-17xl) !important

pr-18xl

padding-right: var(--spacing-18xl) !important

pr-19xl

padding-right: var(--spacing-19xl) !important

pr-20xl

padding-right: var(--spacing-20xl) !important

pr-21xl

padding-right: var(--spacing-21xl) !important

pr-22xl

padding-right: var(--spacing-22xl) !important

pr-23xl

padding-right: var(--spacing-23xl) !important

pr-24xl

padding-right: var(--spacing-24xl) !important

pr-25xl

padding-right: var(--spacing-25xl) !important

pr-26xl

padding-right: var(--spacing-26xl) !important

pr-27xl

padding-right: var(--spacing-27xl) !important

pr-3xl

padding-right: var(--spacing-3xl) !important

pr-3xs

padding-right: var(--spacing-3xs) !important

pr-4xl

padding-right: var(--spacing-4xl) !important

pr-5xl

padding-right: var(--spacing-5xl) !important

pr-6xl

padding-right: var(--spacing-6xl) !important

pr-7xl

padding-right: var(--spacing-7xl) !important

pr-8xl

padding-right: var(--spacing-8xl) !important

pr-9xl

padding-right: var(--spacing-9xl) !important

pr-l

padding-right: var(--spacing-l) !important

pr-m

padding-right: var(--spacing-m) !important

pr-none

padding-right: var(--spacing-none) !important

pr-s

padding-right: var(--spacing-s) !important

pr-xl

padding-right: var(--spacing-xl) !important

pr-xs

padding-right: var(--spacing-xs) !important

pr-xxl

padding-right: var(--spacing-xxl) !important

pr-xxs

padding-right: var(--spacing-xxs) !important

ps-10xl

padding-inline-start: var(--spacing-10xl) !important

ps-11xl

padding-inline-start: var(--spacing-11xl) !important

ps-12xl

padding-inline-start: var(--spacing-12xl) !important

ps-13xl

padding-inline-start: var(--spacing-13xl) !important

ps-14xl

padding-inline-start: var(--spacing-14xl) !important

ps-15xl

padding-inline-start: var(--spacing-15xl) !important

ps-16xl

padding-inline-start: var(--spacing-16xl) !important

ps-17xl

padding-inline-start: var(--spacing-17xl) !important

ps-18xl

padding-inline-start: var(--spacing-18xl) !important

ps-19xl

padding-inline-start: var(--spacing-19xl) !important

ps-20xl

padding-inline-start: var(--spacing-20xl) !important

ps-21xl

padding-inline-start: var(--spacing-21xl) !important

ps-22xl

padding-inline-start: var(--spacing-22xl) !important

ps-23xl

padding-inline-start: var(--spacing-23xl) !important

ps-24xl

padding-inline-start: var(--spacing-24xl) !important

ps-25xl

padding-inline-start: var(--spacing-25xl) !important

ps-26xl

padding-inline-start: var(--spacing-26xl) !important

ps-27xl

padding-inline-start: var(--spacing-27xl) !important

ps-3xl

padding-inline-start: var(--spacing-3xl) !important

ps-3xs

padding-inline-start: var(--spacing-3xs) !important

ps-4xl

padding-inline-start: var(--spacing-4xl) !important

ps-5xl

padding-inline-start: var(--spacing-5xl) !important

ps-6xl

padding-inline-start: var(--spacing-6xl) !important

ps-7xl

padding-inline-start: var(--spacing-7xl) !important

ps-8xl

padding-inline-start: var(--spacing-8xl) !important

ps-9xl

padding-inline-start: var(--spacing-9xl) !important

ps-l

padding-inline-start: var(--spacing-l) !important

ps-m

padding-inline-start: var(--spacing-m) !important

ps-none

padding-inline-start: var(--spacing-none) !important

ps-s

padding-inline-start: var(--spacing-s) !important

ps-xl

padding-inline-start: var(--spacing-xl) !important

ps-xs

padding-inline-start: var(--spacing-xs) !important

ps-xxl

padding-inline-start: var(--spacing-xxl) !important

ps-xxs

padding-inline-start: var(--spacing-xxs) !important

pt-10xl

padding-top: var(--spacing-10xl) !important

pt-11xl

padding-top: var(--spacing-11xl) !important

pt-12xl

padding-top: var(--spacing-12xl) !important

pt-13xl

padding-top: var(--spacing-13xl) !important

pt-14xl

padding-top: var(--spacing-14xl) !important

pt-15xl

padding-top: var(--spacing-15xl) !important

pt-16xl

padding-top: var(--spacing-16xl) !important

pt-17xl

padding-top: var(--spacing-17xl) !important

pt-18xl

padding-top: var(--spacing-18xl) !important

pt-19xl

padding-top: var(--spacing-19xl) !important

pt-20xl

padding-top: var(--spacing-20xl) !important

pt-21xl

padding-top: var(--spacing-21xl) !important

pt-22xl

padding-top: var(--spacing-22xl) !important

pt-23xl

padding-top: var(--spacing-23xl) !important

pt-24xl

padding-top: var(--spacing-24xl) !important

pt-25xl

padding-top: var(--spacing-25xl) !important

pt-26xl

padding-top: var(--spacing-26xl) !important

pt-27xl

padding-top: var(--spacing-27xl) !important

pt-3xl

padding-top: var(--spacing-3xl) !important

pt-3xs

padding-top: var(--spacing-3xs) !important

pt-4xl

padding-top: var(--spacing-4xl) !important

pt-5xl

padding-top: var(--spacing-5xl) !important

pt-6xl

padding-top: var(--spacing-6xl) !important

pt-7xl

padding-top: var(--spacing-7xl) !important

pt-8xl

padding-top: var(--spacing-8xl) !important

pt-9xl

padding-top: var(--spacing-9xl) !important

pt-l

padding-top: var(--spacing-l) !important

pt-m

padding-top: var(--spacing-m) !important

pt-none

padding-top: var(--spacing-none) !important

pt-s

padding-top: var(--spacing-s) !important

pt-xl

padding-top: var(--spacing-xl) !important

pt-xs

padding-top: var(--spacing-xs) !important

pt-xxl

padding-top: var(--spacing-xxl) !important

pt-xxs

padding-top: var(--spacing-xxs) !important

Add padding to a single side

Control the padding on one side of an element using the p{t|r|b|l}-{size} utilities.

pt-xl

pr-3xl

pb-m

pl-5xl

<div className="pt-xl">pt-xl</div>
<div className="pr-3xl">pr-3xl</div>
<div className="pb-m">pb-m</div>
<div className="pl-5xl">pl-5xl</div>

Add horizontal padding

Control the horizontal padding of an element using the px-{size} utilities.

px-xl

<div className="px-xl">px-xl</div>

Add vertical padding

Control the vertical padding of an element using the py-{size} utilities.

py-xl

<div className="py-xl">py-xl</div>

Add padding to all sides

Control the padding on all sides of an element using the p-{size} utilities.

p-xl

<div className="p-xl">p-xl</div>