Version: Next

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 class="mt-xl ...">mt-xl</div>
<div class="mr-3xl ...">mr-3xl</div>
<div class="mb-m ...">mb-m</div>
<div class="ml-5xl ...">ml-5xl</div>

Add horizontal margin

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

mx-xl

<div class="mx-xl ...">mx-xl</div>

Add vertical margin

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

my-xl

<div class="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 class="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 class="pt-xl ...">pt-xl</div>
<div class="pr-3xl ...">pr-3xl</div>
<div class="pb-m ...">pb-m</div>
<div class="pl-5xl ...">pl-5xl</div>

Add horizontal padding

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

px-xl

<div class="px-xl ...">px-xl</div>

Add vertical padding

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

py-xl

<div class="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 class="p-xl ...">p-xl</div>

Margin​

Add margin to a single side​

Add horizontal margin​

Add vertical margin​

Add margin to all sides​

Padding​

Add padding to a single side​

Add horizontal padding​

Add vertical padding​

Add padding to all sides​