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>