Spacing

Spacing utilities control margin, padding, and gap using a mathematical scale. All spacing derives from two custom properties in config.css: --size-base (32px) and --size-scale (2). Each step multiplies or divides by the scale factor, creating a predictable, harmonious progression.

The Size Scale

Six sizes from extra-small to double-extra-large. Each calculated from the base:

xs: 8px (base / scale²)

sm: 16px (base / scale)

md: 32px (base)

lg: 64px (base × scale)

xl: 128px (base × scale²)

2xl: 256px (base × scale³)

Change --size-base or --size-scale in config.css and the entire spacing system recalculates automatically.

Padding

Apply padding to all sides, specific sides, or axes. Visual examples show padding as the colored area inside each box:

All sides

.p-xs

.p-sm

.p-md

.p-lg

Classes: .p-xs, .p-sm, .p-md, .p-lg, .p-xl, .p-2xl

Horizontal (left + right)

px-sm

px-md

px-lg

Classes: .px-{size} for all six sizes

Vertical (top + bottom)

py-sm

py-md

py-lg

Classes: .py-{size} for all six sizes

Individual sides

pt-md

pr-md

pb-md

pl-md

Classes: .pt-{size}, .pr-{size}, .pb-{size}, .pl-{size}

Margin

Apply margin to all sides, specific sides, or axes. Margins create space outside elements:

All sides

m-xs

m-sm

m-md

Classes: .m-xs, .m-sm, .m-md, .m-lg, .m-xl, .m-2xl

Horizontal and vertical

mx-md

my-md

Classes: .mx-{size}, .my-{size}

Individual sides

Classes: .mt-{size}, .mr-{size}, .mb-{size}, .ml-{size}

Gap

Control spacing between flex and grid children. Gap applies between items, not around them. Works with both flexbox and grid layouts:

All directions

gap-xs

gap-sm

gap-md

Classes: .gap-xs through .gap-2xl

Horizontal gap (column-gap)

Item

Classes: .gap-x-{size} for column spacing

Vertical gap (row-gap)

Item

Classes: .gap-y-{size} for row spacing

Container-Responsive Spacing

Spacing utilities include container query variants that respond to the width of the parent container, not the viewport. The md: prefix applies when the container is 900px or narrower. The sm: prefix applies when the container is 600px or narrower.

Container queries let components adapt based on available space, not screen size. A sidebar component uses the same spacing rules whether it appears on mobile or in a desktop sidebar.

.p-xl .md:p-lg .sm:p-md

Resize the browser to see padding adapt at container breakpoints

All margin, padding, and gap utilities include md: and sm: variants. Examples: .md:p-sm, .sm:mx-xs, .md:gap-lg

Fluid Spacing

Fluid spacing is a different approach to responsive spacing. Instead of stepping between fixed values at breakpoints, spacing scales continuously with the container width using clamp() and cqi units. The stepped approach gives you precise control at each breakpoint; the fluid approach gives you smooth scaling with a single class.

The naming inserts fluid into the standard pattern: .p-fluid-xl, .px-fluid-md, .gap-fluid-lg. The size label indicates the maximum -- spacing compresses proportionally as the container shrinks.

Fluid spacing requires an ancestor with container-type: inline-size (the .container class). The cqi unit resolves to 1% of the nearest container's width.

Fluid padding

This box uses .p-fluid-xl. Drag the container to resize -- the padding scales smoothly from 128px down to 32px.

Drag the bottom-right corner to resize.

Fluid and fixed spacing compose naturally. Use fluid where you want scaling, fixed where you want stability:

Mixed spacing

Fluid horizontal padding (.px-fluid-xl) with fixed vertical padding (.py-md). The sides compress, the top and bottom stay put.

Fluid gap works the same way inside grid and flex layouts:

Card

Fluid gap between cards, fluid padding inside.

Card

Everything scales together as the container shrinks.

Card

One class per property, no breakpoints needed.

Available for padding (.p-fluid-*, .px-fluid-*, .py-fluid-*), margin (.m-fluid-*, .mx-fluid-*, .my-fluid-*), and gap (.gap-fluid-*, .gap-x-fluid-*, .gap-y-fluid-*). Sizes run from xs to 2xl.