Spacing

Classes

The family selects the property; the token supplies the distance. px- and mx- use the inline axis, while pl- and ml- use the physical left side. The complete family table lists each native property.

Values

The preset scale uses rem lengths. Pixel equivalents assume a 16px root font size; the browser uses the actual root font size. Use direct-value functions such as p(0) for zero or p(1) for one CSS pixel.

One distance, different boundaries

p-md and gap-md both read --spacing-md, but padding separates content from its box edge while gap separates items in the layout. A gap does not create outer padding.

Both highlighted distances are 1rem, shown at a 16px root font size. Blue and violet are inspection overlays; p-md and gap-md do not add those colors.

Text description

1. Both examples use Grid and the preset --spacing-md value of 1rem. Their content rows use the same typography and internal dimensions.
2. The left example has p-md and no gap. Its blue band lies inside the box edge, surrounding the content on all four sides.
3. The right example has gap-md and no padding. Its violet band lies only between the two rows, with no matching band around the outside.
4. At the depicted 16px root font size, each highlighted distance is 16px. The examples use real generated padding and gap; the annotation colors and dashed boundaries are not utility output.

gap-md sets the gap value; it does not enable Grid or Flexbox. Likewise, an inset token sets an offset but does not choose a positioning scheme. The native property and layout determine the effect.

Negative token forms depend on the consumer: -mt-md is accepted, while -p-md is rejected. The preset has no zero or auto spacing token; use m(0) for zero and a fixed utility such as mx-auto for automatic inline margins.

See negative values and direct values and native gap behavior.

Usage

Pad a form, space its fields and separate each label from its control.

<form class="… grid gap-md p-md">  <label class="… grid gap-2xs">Name<input class="… px-sm py-xs" value="Aron" /></label>  <label class="… grid gap-2xs">Email<input type="email" class="… px-sm py-xs" value="aron@example.com" /></label></form>

@layer theme {  :root,  :host {    --spacing-2xs: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem;    --spacing-md: 1rem  }}@layer utilities {  .grid {    display: grid  }  .gap-2xs {    gap: var(--spacing-2xs)  }  .gap-md {    gap: var(--spacing-md)  }  .p-md {    padding: var(--spacing-md)  }  .py-xs {    padding-block: var(--spacing-xs)  }  .px-sm {    padding-inline: var(--spacing-sm)  }}

Customize

Change a preset value or add a token: --spacing-card creates p-card, m-card, gap-card and the other spacing classes.

@theme {  --spacing-card: 1.25rem;}

@layer theme {  :root,  :host {    --spacing-card: 1.25rem  }}@layer utilities {  .p-card {    padding: var(--spacing-card)  }}

See theme directives and Layout.