Spacing mixins

Controls element margins, padding, gaps, and spacing between children.

<!-- Padding -->
<div class="p-4">All sides padding</div>
<div class="px-4 py-2">Inline and block padding</div>
<div class="pt-2 pb-4">Top and bottom padding</div>
<!-- Margins -->
<div class="m-4">All sides margin</div>
<div class="mt-4">Top margin only</div>
<div class="mx-auto">Centered on the inline axis</div>
<!-- Gap (for flex/grid containers) -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
<!-- Responsive spacing -->
<div class="p-2 p-4@md p-6@lg">
  Padding increases at each breakpoint
</div>
<!-- Child spacing -->
<div class="space-y-4">
  <div>First child</div>
  <div>Second child (margin-block-start: 1rem)</div>
  <div>Third child (margin-block-start: 1rem)</div>
</div>

Padding:

• p-{size}: Padding on all sides
• px-{size}: Inline start and end padding (padding-inline, follows text direction)
• py-{size}: Block start and end padding (padding-block)
• pt-{size}, pr-{size}, pb-{size}, pl-{size}: Individual side padding
• ps-{size}, pe-{size}: Inline start and end padding (follow text direction)

Margin:

• m-{size}: Margin on all sides
• mx-{size}: Inline start and end margin (margin-inline, follows text direction)
• my-{size}: Block start and end margin (margin-block)
• mt-{size}, mr-{size}, mb-{size}, ml-{size}: Individual side margin
• ms-{size}, me-{size}: Inline start and end margin (follow text direction)
• mx-auto, ml-auto, mr-auto, ms-auto, me-auto: Auto margin for alignment

Gap:

• gap-{size}: Gap between flex/grid children (all directions)
• gap-x-{size}: Gap between columns (column-gap)
• gap-y-{size}: Gap between rows (row-gap)

Child spacing:

• space-x-{size}: Inline space between children (margin-inline-start, follows text direction)
• space-y-{size}: Block space between children (margin-block-start, top in horizontal writing modes)

Responsive: all spacing classes support responsive variants using the @breakpoint suffix:

• p-4@md: 1rem padding on medium screens and up
• mt-8@lg: 2rem top margin on large screens
• gap-2@xl: 0.5rem gap on extra large screens

Spacing values are defined in the $spacings map in config/_spacing.scss; each key is emitted as a --wu-space-{key} token. Typically follows a scale where higher numbers mean more spacing.

See also: flex, grid, display.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Spacing. The A to Z index lists every public mixin and function.

Source: utilities/_spacing.scss

Mixins

p px py pt pr pb pl ps pe m mx my mt mr mb ml ms me ml-auto mr-auto ms-auto me-auto mx-auto space-y space-x gap gap-x gap-y

p mixin

Sets padding on all sides from a spacing key or a raw value.

@mixin p($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.card {
  @include p(4); // padding: var(--wu-space-4)
}

Compiled CSS

.card {
  padding: var(--wu-space-4);
}

Example 2

.card-wide {
  @include p(1.5rem); // padding: 1.5rem
}

Compiled CSS

.card-wide {
  padding: 1.5rem;
}

padding on MDN

See also: px, py, pt, ps. Source: utilities/_spacing.scss:142

px mixin

Sets padding on the inline start and end (padding-inline), following text direction.

@mixin px($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.button {
  @include px(4); // padding-inline: var(--wu-space-4)
}

Compiled CSS

.button {
  padding-inline: var(--wu-space-4);
}

Example 2

.chip {
  @include apply(px(2), py(1));
}

Compiled CSS

.chip {
  padding-inline: var(--wu-space-2);
  padding-block: var(--wu-space-1);
}

padding-inline on MDN

See also: py, ps, pe. Source: utilities/_spacing.scss:160

py mixin

Sets padding on the block start and end (padding-block), top and bottom in horizontal writing modes.

@mixin py($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.button {
  @include py(2); // padding-block: var(--wu-space-2)
}

Compiled CSS

.button {
  padding-block: var(--wu-space-2);
}

Example 2

.row {
  @include py(0.625rem); // padding-block: 0.625rem
}

Compiled CSS

.row {
  padding-block: 0.625rem;
}

padding-block on MDN

See also: px, pt, pb. Source: utilities/_spacing.scss:178

pt mixin

Sets padding-top from a spacing key or a raw value.

@mixin pt($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.section {
  @include pt(4); // padding-top: var(--wu-space-4)
}

Compiled CSS

.section {
  padding-top: var(--wu-space-4);
}

Example 2

.section-wide {
  @include pt(1.5rem); // padding-top: 1.5rem
}

Compiled CSS

.section-wide {
  padding-top: 1.5rem;
}

padding-top on MDN

See also: pb, py. Source: utilities/_spacing.scss:195

pr mixin

Sets padding-right (physical, does not follow text direction) from a spacing key or a raw value.

@mixin pr($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.gutter {
  @include pr(4); // padding-right: var(--wu-space-4)
}

Compiled CSS

.gutter {
  padding-right: var(--wu-space-4);
}

Example 2

.gutter-wide {
  @include pr(1.5rem); // padding-right: 1.5rem
}

Compiled CSS

.gutter-wide {
  padding-right: 1.5rem;
}

padding-right on MDN

See also: pe, pl. Source: utilities/_spacing.scss:212

pb mixin

Sets padding-bottom from a spacing key or a raw value.

@mixin pb($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.section {
  @include pb(4); // padding-bottom: var(--wu-space-4)
}

Compiled CSS

.section {
  padding-bottom: var(--wu-space-4);
}

Example 2

.section-wide {
  @include pb(1.5rem); // padding-bottom: 1.5rem
}

Compiled CSS

.section-wide {
  padding-bottom: 1.5rem;
}

padding-bottom on MDN

See also: pt, py. Source: utilities/_spacing.scss:229

pl mixin

Sets padding-left (physical, does not follow text direction) from a spacing key or a raw value.

@mixin pl($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.gutter {
  @include pl(4); // padding-left: var(--wu-space-4)
}

Compiled CSS

.gutter {
  padding-left: var(--wu-space-4);
}

Example 2

.gutter-wide {
  @include pl(1.5rem); // padding-left: 1.5rem
}

Compiled CSS

.gutter-wide {
  padding-left: 1.5rem;
}

padding-left on MDN

See also: ps, pr. Source: utilities/_spacing.scss:246

ps mixin

Sets padding-inline-start (left in LTR, right in RTL) from a spacing key or a raw value.

@mixin ps($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.list {
  @include ps(4); // padding-inline-start: var(--wu-space-4)
}

Compiled CSS

.list {
  padding-inline-start: var(--wu-space-4);
}

Example 2

.list-wide {
  @include ps(1.5rem); // padding-inline-start: 1.5rem
}

Compiled CSS

.list-wide {
  padding-inline-start: 1.5rem;
}

padding-inline-start on MDN

See also: pe, px, pl. Source: utilities/_spacing.scss:264

pe mixin

Sets padding-inline-end (right in LTR, left in RTL) from a spacing key or a raw value.

@mixin pe($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), or a value with a unit, calc() or var(); negative keys and auto raise an error

Example 1

.input {
  @include pe(4); // padding-inline-end: var(--wu-space-4)
}

Compiled CSS

.input {
  padding-inline-end: var(--wu-space-4);
}

Example 2

.input-wide {
  @include pe(1.5rem); // padding-inline-end: 1.5rem
}

Compiled CSS

.input-wide {
  padding-inline-end: 1.5rem;
}

padding-inline-end on MDN

See also: ps, px, pr. Source: utilities/_spacing.scss:282

m mixin

Sets margin on all sides from a spacing key, a negative key, auto or a raw value.

@mixin m($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.card {
  @include m(4); // margin: var(--wu-space-4)
}

Compiled CSS

.card {
  margin: var(--wu-space-4);
}

Example 2

.bleed {
  @include m(-2); // margin: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.bleed {
  margin: calc(-1 * var(--wu-space-2));
}

margin on MDN

See also: mx, my, mt, ms. Source: utilities/_spacing.scss:303

mx mixin

Sets margin on the inline start and end (margin-inline), following text direction.

@mixin mx($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.divider {
  @include mx(4); // margin-inline: var(--wu-space-4)
}

Compiled CSS

.divider {
  margin-inline: var(--wu-space-4);
}

Example 2

.bleed {
  @include mx(-4); // margin-inline: calc(-1 * var(--wu-space-4))
}

Compiled CSS

.bleed {
  margin-inline: calc(-1 * var(--wu-space-4));
}

margin-inline on MDN

See also: mx-auto, my, ms, me. Source: utilities/_spacing.scss:322

my mixin

Sets margin on the block start and end (margin-block), top and bottom in horizontal writing modes.

@mixin my($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.divider {
  @include my(6); // margin-block: var(--wu-space-6)
}

Compiled CSS

.divider {
  margin-block: var(--wu-space-6);
}

Example 2

.hr {
  @include my(1.5rem); // margin-block: 1.5rem
}

Compiled CSS

.hr {
  margin-block: 1.5rem;
}

margin-block on MDN

See also: mx, mt, mb. Source: utilities/_spacing.scss:340

mt mixin

Sets margin-top from a spacing key, a negative key, auto or a raw value.

@mixin mt($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.section {
  @include mt(4); // margin-top: var(--wu-space-4)
}

Compiled CSS

.section {
  margin-top: var(--wu-space-4);
}

Example 2

.section-pull {
  @include mt(-2); // margin-top: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.section-pull {
  margin-top: calc(-1 * var(--wu-space-2));
}

margin-top on MDN

See also: mb, my. Source: utilities/_spacing.scss:357

mr mixin

Sets margin-right (physical, does not follow text direction) from a spacing key, a negative key, auto or a raw value.

@mixin mr($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include mr(4); // margin-right: var(--wu-space-4)
}

Compiled CSS

.icon {
  margin-right: var(--wu-space-4);
}

Example 2

.icon-pull {
  @include mr(-2); // margin-right: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.icon-pull {
  margin-right: calc(-1 * var(--wu-space-2));
}

margin-right on MDN

See also: me, ml, mr-auto. Source: utilities/_spacing.scss:375

mb mixin

Sets margin-bottom from a spacing key, a negative key, auto or a raw value.

@mixin mb($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.heading {
  @include mb(4); // margin-bottom: var(--wu-space-4)
}

Compiled CSS

.heading {
  margin-bottom: var(--wu-space-4);
}

Example 2

.heading-pull {
  @include mb(-2); // margin-bottom: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.heading-pull {
  margin-bottom: calc(-1 * var(--wu-space-2));
}

margin-bottom on MDN

See also: mt, my. Source: utilities/_spacing.scss:392

ml mixin

Sets margin-left (physical, does not follow text direction) from a spacing key, a negative key, auto or a raw value.

@mixin ml($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include ml(4); // margin-left: var(--wu-space-4)
}

Compiled CSS

.icon {
  margin-left: var(--wu-space-4);
}

Example 2

.icon-pull {
  @include ml(-2); // margin-left: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.icon-pull {
  margin-left: calc(-1 * var(--wu-space-2));
}

margin-left on MDN

See also: ms, mr, ml-auto. Source: utilities/_spacing.scss:410

ms mixin

Sets margin-inline-start (left in LTR, right in RTL) from a spacing key, a negative key, auto or a raw value.

@mixin ms($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include ms(4); // margin-inline-start: var(--wu-space-4)
}

Compiled CSS

.icon {
  margin-inline-start: var(--wu-space-4);
}

Example 2

.icon-pull {
  @include ms(-2); // margin-inline-start: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.icon-pull {
  margin-inline-start: calc(-1 * var(--wu-space-2));
}

margin-inline-start on MDN

See also: me, mx, ms-auto. Source: utilities/_spacing.scss:428

me mixin

Sets margin-inline-end (right in LTR, left in RTL) from a spacing key, a negative key, auto or a raw value.

@mixin me($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key (4 gives var(--wu-space-4)), a negative key, auto, or a value with a unit, calc() or var()

Example 1

.icon {
  @include me(4); // margin-inline-end: var(--wu-space-4)
}

Compiled CSS

.icon {
  margin-inline-end: var(--wu-space-4);
}

Example 2

.icon-pull {
  @include me(-2); // margin-inline-end: calc(-1 * var(--wu-space-2))
}

Compiled CSS

.icon-pull {
  margin-inline-end: calc(-1 * var(--wu-space-2));
}

margin-inline-end on MDN

See also: ms, mx, me-auto. Source: utilities/_spacing.scss:446

ml-auto mixin

Sets margin-left to auto (physical), pushing the element to the right in a flex row.

@mixin ml-auto

Example

.actions {
  @include ml-auto; // margin-left: auto
}

Compiled CSS

.actions {
  margin-left: auto;
}

margin-left on MDN

See also: ms-auto, mr-auto. Source: utilities/_spacing.scss:458

mr-auto mixin

Sets margin-right to auto (physical), pushing the element to the left in a flex row.

@mixin mr-auto

Example

.logo {
  @include mr-auto; // margin-right: auto
}

Compiled CSS

.logo {
  margin-right: auto;
}

margin-right on MDN

See also: me-auto, ml-auto. Source: utilities/_spacing.scss:470

ms-auto mixin

Sets margin-inline-start to auto, pushing the element to the inline end in a flex row.

@mixin ms-auto

Example

.actions {
  @include ms-auto; // margin-inline-start: auto
}

Compiled CSS

.actions {
  margin-inline-start: auto;
}

margin-inline-start on MDN

See also: me-auto, ml-auto. Source: utilities/_spacing.scss:482

me-auto mixin

Sets margin-inline-end to auto, pushing the element to the inline start in a flex row.

@mixin me-auto

Example

.logo {
  @include me-auto; // margin-inline-end: auto
}

Compiled CSS

.logo {
  margin-inline-end: auto;
}

margin-inline-end on MDN

See also: ms-auto, mr-auto. Source: utilities/_spacing.scss:494

mx-auto mixin

Centers a block element on the inline axis with margin-inline: auto.

@mixin mx-auto

Example

.container {
  @include apply(max-width(64rem), mx-auto);
}

Compiled CSS

.container {
  max-width: 64rem;
  margin-inline: auto;
}

margin-inline on MDN

See also: mx, ms-auto, me-auto. Source: utilities/_spacing.scss:507

space-y mixin

Adds margin-block-start to every direct child after the first, spacing children along the block axis (vertically in horizontal writing modes).

@mixin space-y($i)

Parameter	Type	Default	Description
$i	Number|Length|Calculation|String	Required	Spacing key, a negative key, or a value with a unit, calc() or var()

Example

.stack {
  @include space-y(4); // .stack > * + * { margin-block-start: var(--wu-space-4) }
}

Compiled CSS

.stack > * + * {
  margin-block-start: var(--wu-space-4);
}

See also: space-x, gap. Source: utilities/_spacing.scss:521

space-x mixin

Adds margin-inline-start to every direct child after the first, spacing children along the inline axis.

@mixin space-x($i)

Parameter	Type	Default	Description
$i	Number|Length|Calculation|String	Required	Spacing key, a negative key, or a value with a unit, calc() or var()

Example

.toolbar {
  @include space-x(2); // .toolbar > * + * { margin-inline-start: var(--wu-space-2) }
}

Compiled CSS

.toolbar > * + * {
  margin-inline-start: var(--wu-space-2);
}

See also: space-y, gap-x. Source: utilities/_spacing.scss:535

gap mixin

Sets gap on a flex or grid container and passes it to direct children as --wu-gap for fill() widths.

@mixin gap($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key, normal, or a value with a unit, calc() or var(); negative keys raise an error

Example 1

.grid {
  @include gap(4); // gap: var(--wu-space-4)
}

Compiled CSS

.grid {
  gap: var(--wu-space-4);
}
.grid > * {
  --wu-gap: var(--wu-space-4);
}

Example 2

.cards {
  @include apply(flex, gap(1.25rem));
}

Compiled CSS

.cards {
  display: flex;
  gap: 1.25rem;
}
.cards > * {
  --wu-gap: 1.25rem;
}

See also: gap-x, gap-y, space-x. Source: utilities/_spacing.scss:564

gap-x mixin

Sets column-gap on a flex or grid container and passes it to direct children as --wu-gap for fill() widths.

@mixin gap-x($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key, normal, or a value with a unit, calc() or var(); negative keys raise an error

Example

.row {
  @include gap-x(6); // column-gap: var(--wu-space-6)
}

Compiled CSS

.row {
  column-gap: var(--wu-space-6);
}
.row > * {
  --wu-gap: var(--wu-space-6);
}

See also: gap, gap-y. Source: utilities/_spacing.scss:582

gap-y mixin

Sets row-gap on a flex or grid container; --wu-gap is not set because it only feeds inline widths.

@mixin gap-y($val)

Parameter	Type	Default	Description
$val	Number|Length|Calculation|String	Required	Spacing key, normal, or a value with a unit, calc() or var(); negative keys raise an error

Example

.column {
  @include gap-y(2); // row-gap: var(--wu-space-2)
}

Compiled CSS

.column {
  row-gap: var(--wu-space-2);
}

row-gap on MDN

See also: gap, gap-x. Source: utilities/_spacing.scss:601