spacing

Preset spacing values and their consumers.

Scope

These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.

A shared spacing scale supports padding, margin, gaps and other length-valued properties.

Values

4xs

--spacing-4xs

Default.125rem

3xs

--spacing-3xs

Default.25rem

2xs

--spacing-2xs

Default.375rem

xs

--spacing-xs

Default.5rem

sm

--spacing-sm

Default.75rem

md

--spacing-md

Default1rem

lg

--spacing-lg

Default1.5rem

xl

--spacing-xl

Default2rem

2xl

--spacing-2xl

Default3rem

3xl

--spacing-3xl

Default4rem

4xl

--spacing-4xl

Default6rem

5xl

--spacing-5xl

Default8rem

Consumers

background-position-, border-spacing-, bottom-, column-gap-, cx-, cy-, gap-, gap-x-, gap-y-, inset-, inset-block-, inset-block-end-, inset-block-start-, inset-inline-, inset-inline-end-, inset-inline-start-, ix-, ixe-, ixs-, iy-, iye-, iys-, left-, m-, margin-, margin-block-, margin-block-end-, margin-block-start-, margin-bottom-, margin-inline-, margin-inline-end-, margin-inline-start-, margin-left-, margin-right-, margin-top-, mask-position-, mb-, ml-, mr-, mt-, mx-, mxe-, mxs-, my-, mye-, mys-, object-position-, outline-offset-, p-, padding-, padding-block-, padding-block-end-, padding-block-start-, padding-bottom-, padding-inline-, padding-inline-end-, padding-inline-start-, padding-left-, padding-right-, padding-top-, pb-, perspective-, perspective-origin-, pl-, pr-, pt-, px-, pxe-, pxs-, py-, pye-, pys-, right-, row-gap-, scroll-m-, scroll-margin-, scroll-margin-block-, scroll-margin-block-end-, scroll-margin-block-start-, scroll-margin-bottom-, scroll-margin-inline-, scroll-margin-inline-end-, scroll-margin-inline-start-, scroll-margin-left-, scroll-margin-right-, scroll-margin-top-, scroll-mb-, scroll-ml-, scroll-mr-, scroll-mt-, scroll-mx-, scroll-mxe-, scroll-mxs-, scroll-my-, scroll-mye-, scroll-mys-, scroll-p-, scroll-padding-, scroll-padding-block-, scroll-padding-block-end-, scroll-padding-block-start-, scroll-padding-bottom-, scroll-padding-inline-, scroll-padding-inline-end-, scroll-padding-inline-start-, scroll-padding-left-, scroll-padding-right-, scroll-padding-top-, scroll-pb-, scroll-pl-, scroll-pr-, scroll-pt-, scroll-px-, scroll-pxe-, scroll-pxs-, scroll-py-, scroll-pye-, scroll-pys-, shape-margin-, stroke-dashoffset-, text-indent-, text-underline-, text-underline-offset-, top-, transform-origin-, translate-, word-spacing-, x-, y-

Customize

See variables and modes and theme directives. For usage and examples, see Spacing.