Skip to main content
🏠CustomizationSpacingVersion: 2.0.0-beta.6

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>