Class Reference

Spacing

Class Reference

Spacing

Padding and gaps between elements.

How to use

Apply gap classes to flex or grid parents and padding classes to the element itself. padding-none resets all four sides, so do not combine it with a class that should keep padding. For sections, use padding-top-* or padding-bottom-* to change one side. Both families support none, sm, md, lg, xl, 2xl and 3xl. For example, section-normal padding-bottom-sm keeps normal top padding and uses small bottom padding. You can combine one top modifier with one bottom modifier; use only one per side. Find these utilities in Pro under CSS Presets → Spacing; they are also included in Free.

Responsive behavior

Many values reference fluid spacing variables and scale automatically. Use a responsive class when that class has a tablet or mobile variant.

Visual reference

Live examples use the installed class styles and your current design variables. Previews expand to show the full example; responsive classes follow the browser width.

.gap-sectiongap: var(--gap-section)

123

.gap-nonegap: var(--space-none)

123

.gap-3xsgap: var(--size-3xs)

123

.gap-2xsgap: var(--size-2xs)

123

.gap-xsgap: var(--size-sm)

123

.gap-smgap: var(--size-lg)

123

.gap-mdgap: var(--size-xl)

123

.gap-lggap: var(--size-2xl)

123

.gap-xlgap: var(--size-3xl)

123

.gap-2xlgap: var(--size-4xl)

123

.gap-3xlgap: var(--size-5xl)

123

.gap-cardgap: var(--gap-card)

123

.gap-stackgap: var(--gap-stack)

123

.gap-gridgap: var(--gap-grid)

123

.gap-headergap: var(--gap-header)

123

.gap-footergap: var(--gap-footer)

.gap-navgap: var(--gap-nav)

123

.gap-formgap: var(--gap-form)

123

.gap-splitgap: var(--gap-split)

123

.padding-headerpadding-top: var(--padding-header-y) · padding-right: var(--padding-header-x) · padding-bottom: var(--padding-header-y) · padding-left: var(--padding-header-x)

Content

.padding-footerpadding-top: var(--padding-footer-y) · padding-right: var(--padding-footer-x) · padding-bottom: var(--padding-footer-y) · padding-left: var(--padding-footer-x)

.padding-cardpadding-top: var(--padding-card) · padding-right: var(--padding-card) · padding-bottom: var(--padding-card) · padding-left: var(--padding-card)

Content

.padding-buttonpadding-top: var(--padding-button-y) · padding-right: var(--padding-button-x) · padding-bottom: var(--padding-button-y) · padding-left: var(--padding-button-x)

Content

.padding-inputpadding-top: var(--padding-input-y) · padding-right: var(--padding-input-x) · padding-bottom: var(--padding-input-y) · padding-left: var(--padding-input-x)

Content

.margin-inline-automargin-left: auto · margin-right: auto

Content

.margin-left-automargin-left: auto

Content

.margin-right-automargin-right: auto

Content

.margin-top-automargin-top: auto

Content

.margin-nonemargin-top: var(--space-none) · margin-right: var(--space-none) · margin-bottom: var(--space-none) · margin-left: var(--space-none)

Content

.padding-nonepadding-top: var(--space-none) · padding-right: var(--space-none) · padding-bottom: var(--space-none) · padding-left: var(--space-none)

Content

.margin-top-nonemargin-top: var(--space-none)

Content

.margin-bottom-nonemargin-bottom: var(--space-none)

Content

.padding-top-nonepadding-top: var(--space-none)

Content

.padding-top-smpadding-top: var(--space-sm) · shown with section-normal

Content

.padding-top-mdpadding-top: var(--space-md) · shown with section-normal

Content

.padding-top-lgpadding-top: var(--space-lg) · shown with section-normal

Content

.padding-top-xlpadding-top: var(--space-xl) · shown with section-normal

Content

.padding-top-2xlpadding-top: var(--space-2xl) · shown with section-normal

Content

.padding-top-3xlpadding-top: var(--space-3xl) · shown with section-normal

Content

.padding-bottom-nonepadding-bottom: var(--space-none)

Content

.padding-bottom-smpadding-bottom: var(--space-sm) · shown with section-normal

Content

.padding-bottom-mdpadding-bottom: var(--space-md) · shown with section-normal

Content

.padding-bottom-lgpadding-bottom: var(--space-lg) · shown with section-normal

Content

.padding-bottom-xlpadding-bottom: var(--space-xl) · shown with section-normal

Content

.padding-bottom-2xlpadding-bottom: var(--space-2xl) · shown with section-normal

Content

.padding-bottom-3xlpadding-bottom: var(--space-3xl) · shown with section-normal

Content

.padding-x-nonepadding-left: var(--space-none) · padding-right: var(--space-none)

Content

.padding-badgepadding-top: var(--padding-badge-y) · padding-bottom: var(--padding-badge-y) · padding-left: var(--padding-badge-x) · padding-right: var(--padding-badge-x)

Content

.padding-y-nonepadding-top: var(--space-none) · padding-bottom: var(--space-none)

Content

.margin-bottom-automargin-bottom: auto

Content

.row-gap-nonerow-gap: var(--space-none)

Content

.row-gap-3xsrow-gap: var(--size-3xs)

Content

.row-gap-2xsrow-gap: var(--size-2xs)

Content

.row-gap-xsrow-gap: var(--size-sm)

Content

.row-gap-smrow-gap: var(--size-lg)

Content

.row-gap-mdrow-gap: var(--size-xl)

Content

.row-gap-lgrow-gap: var(--size-2xl)

Content

.row-gap-xlrow-gap: var(--size-3xl)

Content

.row-gap-2xlrow-gap: var(--size-4xl)

Content

.row-gap-3xlrow-gap: var(--size-5xl)

Content

.column-gap-nonecolumn-gap: var(--space-none)

Content

.column-gap-3xscolumn-gap: var(--size-3xs)

Content

.column-gap-2xscolumn-gap: var(--size-2xs)

Content

.column-gap-xscolumn-gap: var(--size-sm)

Content

.column-gap-smcolumn-gap: var(--size-lg)

Content

.column-gap-mdcolumn-gap: var(--size-xl)

Content

.column-gap-lgcolumn-gap: var(--size-2xl)

Content

.column-gap-xlcolumn-gap: var(--size-3xl)

Content

.column-gap-2xlcolumn-gap: var(--size-4xl)

Content

.column-gap-3xlcolumn-gap: var(--size-5xl)

Content

NextTypographyExplore typography classes and how to use them.