Skip to content
NuvoUI

Spacing

Spacing utilities set padding, margin, gap and the space between children. Every class and mixin reads the same spacing scale, and every value on the scale is a CSS custom property, so a layout written with NuvoUI stays consistent and can be retuned in one place.

How spacing works

Section titled “How spacing works”
  • One scale. Keys such as 2, 4 and 8 name steps on the $spacings map. p-4, p(4) and token(space-4) all mean the same value.
  • Tokens. Each key is emitted as --nu-space-{key}. Classes and mixins output var(--nu-space-{key}), never a hard-coded length.
  • Readable names. The first letter is the property (p padding, m margin), the next letter is the side or axis, and the number is the scale key.
Part Meaning Examples
p, m Padding, margin on all sides p-4, m-2
x, y Inline axis, block axis (logical) px-4, my-2
s, e Inline start, inline end (logical) ps-4, me-2
t, r, b, l Top, right, bottom, left (physical) pt-4, ml-2
gap, gap-x, gap-y Gap between flex or grid children gap-4, gap-x-2
space-x, space-y Margin between direct children space-y-3

Scale

Section titled “Scale”

The table below is generated from the core source when the site is built: core is compiled with Sass and the --nu-space-* tokens are read from the output. It always matches the current release of @nuvoui/core.

KeyTokenValuePixels
0--nu-space-000px
1--nu-space-10.25rem4px
2--nu-space-20.5rem8px
3--nu-space-30.75rem12px
4--nu-space-41rem16px
5--nu-space-51.25rem20px
6--nu-space-61.5rem24px
8--nu-space-82rem32px
10--nu-space-102.5rem40px
12--nu-space-123rem48px
16--nu-space-164rem64px
20--nu-space-205rem80px
24--nu-space-246rem96px
32--nu-space-328rem128px
40--nu-space-4010rem160px
48--nu-space-4812rem192px
56--nu-space-5614rem224px
64--nu-space-6416rem256px

A key that is not on the scale has no class and raises a compile error in mixins. To add a step, change the configuration (see Configuration).

Padding

Section titled “Padding”

Padding adds space inside an element, between its border and its content. In the examples, the tinted area is the padding.

All sides, one axis, one side
p-4
px-6 py-2
pt-8
<div class="flex wrap gap-4">
  <div class="p-4 bg-brand-subtle rounded"><div class="p-2 bg-surface rounded">p-4</div></div>
  <div class="px-6 py-2 bg-brand-subtle rounded"><div class="p-2 bg-surface rounded">px-6 py-2</div></div>
  <div class="pt-8 bg-brand-subtle rounded"><div class="p-2 bg-surface rounded">pt-8</div></div>
</div>

Margin

Section titled “Margin”

Margin adds space outside an element, between it and its neighbours.

mb-4: space below
mx-8: space on both inline sides
mt-2: space above
<div class="bg-alternate rounded p-2">
  <div class="mb-4 p-3 bg-surface border rounded">mb-4: space below</div>
  <div class="mx-8 p-3 bg-surface border rounded">mx-8: space on both inline sides</div>
  <div class="mt-2 p-3 bg-surface border rounded">mt-2: space above</div>
</div>

Logical and physical sides

Section titled “Logical and physical sides”

Logical utilities follow the text direction. In a left-to-right language such as English, the start side is the left; in a right-to-left language such as Arabic, the start side is the right. Physical utilities always mean the same screen side.

Logical class Property Physical class Property
ps-* padding-inline-start pl-* padding-left
pe-* padding-inline-end pr-* padding-right
ms-* margin-inline-start ml-* margin-left
me-* margin-inline-end mr-* margin-right
px-*, mx-* padding-inline, margin-inline
py-*, my-* padding-block, margin-block pt-*, pb-*, mt-*, mb-* top and bottom

px, py, mx, my and space-x are logical: in NuvoUI, x means the inline axis.

The same markup is rendered twice below, once left to right and once right to left. The logical padding moves to the start side; the physical padding stays on the left.

LTR
ps-8 (start side)
pl-8 (always left)
RTL
ps-8 (start side)
pl-8 (always left)
<div class="space-y-2">
  <div class="ps-8 py-2 bg-brand-subtle rounded"><div class="p-2 bg-surface rounded">ps-8 (start side)</div></div>
  <div class="pl-8 py-2 bg-alternate rounded"><div class="p-2 bg-surface rounded">pl-8 (always left)</div></div>
</div>

When to use which

Section titled “When to use which”
  • Use logical utilities for layout that should mirror in right-to-left languages: indentation, icon spacing, the gap between a label and its control, a sidebar edge.
  • Use physical utilities for content that must stay on the left in both Arabic and English, where mirroring would change its meaning.
Physical: the accent stays on the left in both directions
LTR
Left-anchored content: pl-4 border-l-4 text-left
RTL
Left-anchored content: pl-4 border-l-4 text-left 
<div class="pl-4 border-l-4 text-left p-3 bg-surface rounded">
  Left-anchored content: pl-4 border-l-4 text-left
</div>

Auto margins

Section titled “Auto margins”

Auto margins take up the free space on a side. mx-auto centres a block that has a width or maximum width (margin-inline: auto). ms-auto pushes an item to the end of a flex row in either direction.

mx-auto max-w-xs
<div class="bg-alternate rounded p-2">
  <div class="mx-auto max-w-xs p-3 bg-surface border rounded text-center">mx-auto max-w-xs</div>
</div>
LTR
Invoices
RTL
Invoices 
<div class="flex x-center gap-2 p-3 bg-surface border rounded">
  <strong>Invoices</strong>
  <button class="ms-auto" type="button">New invoice</button>
</div>

Available auto classes: mx-auto, ms-auto, me-auto, ml-auto, mr-auto.

Negative margins

Section titled “Negative margins”

There are no negative margin classes. Use a negative key in a mixin: margin, space and inset mixins accept it and output calc(-1 * var(--nu-space-{key})).

.bleed {
  @include apply(mx(-4), mt(-2));
}
.bleed {
  margin-inline: calc(-1 * var(--nu-space-4));
  margin-top: calc(-1 * var(--nu-space-2));
}

Gap

Section titled “Gap”

gap-* sets the space between the children of a flex or grid container. Unlike margins, gap never adds space before the first child or after the last one, and it works across wrapped rows.

One
Two
Three
<div class="flex wrap gap-4">
  <div class="p-3 bg-brand-subtle rounded">One</div>
  <div class="p-3 bg-brand-subtle rounded">Two</div>
  <div class="p-3 bg-brand-subtle rounded">Three</div>
</div>

gap-x-* sets the column gap and gap-y-* the row gap.

1
2
3
4
5
6
<div class="grid cols-3 gap-x-8 gap-y-2">
  <div class="p-3 bg-brand-subtle rounded">1</div>
  <div class="p-3 bg-brand-subtle rounded">2</div>
  <div class="p-3 bg-brand-subtle rounded">3</div>
  <div class="p-3 bg-brand-subtle rounded">4</div>
  <div class="p-3 bg-brand-subtle rounded">5</div>
  <div class="p-3 bg-brand-subtle rounded">6</div>
</div>

gap-* and gap-x-* also set the internal custom property --nu-flex-gap on direct children, which the flex fill() width calculation reads. It is registered with inherits: false, so a nested flex container does not pick up its parent’s gap. It is not a token and token() does not accept it.

Space between children

Section titled “Space between children”

space-y-* adds a top margin to every direct child except the first. space-x-* adds margin-inline-start, so it follows the text direction. Prefer gap-* for flex and grid containers; use space-* for plain block flow, such as a stack of paragraphs.

First
Second
Third
<div class="space-y-3">
  <div class="p-3 bg-surface border rounded">First</div>
  <div class="p-3 bg-surface border rounded">Second</div>
  <div class="p-3 bg-surface border rounded">Third</div>
</div>
LTR
OneTwoThree
RTL
OneTwoThree 
<div class="space-x-4">
  <span class="inline-block p-2 bg-brand-subtle rounded">One</span><span class="inline-block p-2 bg-brand-subtle rounded">Two</span><span class="inline-block p-2 bg-brand-subtle rounded">Three</span>
</div>

Responsive variants

Section titled “Responsive variants”

Every spacing class has a responsive variant written with an @{breakpoint} suffix. A variant applies from its breakpoint upwards (mobile first), so list the base class first and larger screens after it.

p-2 p-4@md p-8@lg: resize the window
<div class="p-2 p-4@md p-8@lg bg-brand-subtle rounded">
  <div class="p-2 bg-surface rounded">p-2 p-4@md p-8@lg: resize the window</div>
</div>
SuffixMedia query
@xs@media (min-width: 480px)
@sm@media (min-width: 640px)
@md@media (min-width: 768px)
@lg@media (min-width: 1024px)
@xl@media (min-width: 1280px)
@2xl@media (min-width: 1536px)

Spacing has no state variants: there is no hover:p-4 class. Change spacing on hover in your own SCSS when it is really needed, and keep in mind that it moves surrounding content.

SCSS

Section titled “SCSS”

Every class has a mixin of the same name. Use them inside apply(), with a breakpoint after the mixin when needed.

@use "@nuvoui/core" as *;


.card {
  @include apply(p(4), mx(auto), ms(2) md);
}
.card {
  padding: var(--nu-space-4);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .card {
    margin-inline-start: var(--nu-space-2);
  }
}

Keys and custom values

Section titled “Keys and custom values”

A unitless number is a scale key: p(4) is var(--nu-space-4), the same as .p-4. A value with a unit is used as written, for one-off values that are not on the scale.

.hero {
  @include apply(p(1.5rem), gap(normal));
}

Margin and padding mixins also accept calc(), var() and the CSS-wide keywords (inherit, initial, unset, revert, revert-layer). Margin accepts auto; gap accepts normal.

Tokens in your own CSS

Section titled “Tokens in your own CSS”

token() returns the custom property for a token name and raises an error for a name that does not exist.

.note {
  padding-inline: token(space-4);
  margin-block-end: token(space-2);
}

The Sass map stays available for compile-time maths: map.get($spacings, 4) returns 1rem.

Configuration

Section titled “Configuration”

Pass your own $spacings map when loading core. The map replaces the default map; it is not merged, so include every key you use. Base element styles read keys 1, 2 and 4; without them those declarations are dropped, so keep these keys.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $spacings: (0: 0, 0.5: 0.125rem, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 6: 1.5rem, 8: 2rem, 12: 3rem, 16: 4rem)
);

Decimal keys are escaped in class names and use _ in token names: key 0.5 gives .p-0\.5 (written p-0.5 in HTML) and --nu-space-0_5.

Errors

Section titled “Errors”

Spacing mixins fail at compile time instead of emitting broken CSS.

Input Error
p(7) p: 7 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (7px, 7rem).
p(-4) p: negative key -4 is not allowed here. Negative keys work for margin, inset, offsets, translate and space only.
p(auto) p: auto is not a valid padding value.
token(space-7) token(space-7): unknown token. Close matches: space-0, space-1, ...

Negative keys are rejected for padding and gap. 0 is always accepted.

CSS variables

Section titled “CSS variables”
Variable Description
--nu-space-{key} One token per key of $spacings. Fixed across themes. See Scale.

--nu-flex-gap is an internal property set by the gap utilities, not a token.

Class reference

Section titled “Class reference”

Generated from the compiled core build. Each class also has the responsive variants listed in Responsive variants.

Padding (162 rules)
SelectorDeclarationsDefault value
.p-0padding: var(--nu-space-0)0
.px-0padding-inline: var(--nu-space-0)0
.py-0padding-block: var(--nu-space-0)0
.pt-0padding-top: var(--nu-space-0)0
.pr-0padding-right: var(--nu-space-0)0
.pb-0padding-bottom: var(--nu-space-0)0
.pl-0padding-left: var(--nu-space-0)0
.ps-0padding-inline-start: var(--nu-space-0)0
.pe-0padding-inline-end: var(--nu-space-0)0
.p-1padding: var(--nu-space-1)0.25rem
.px-1padding-inline: var(--nu-space-1)0.25rem
.py-1padding-block: var(--nu-space-1)0.25rem
.pt-1padding-top: var(--nu-space-1)0.25rem
.pr-1padding-right: var(--nu-space-1)0.25rem
.pb-1padding-bottom: var(--nu-space-1)0.25rem
.pl-1padding-left: var(--nu-space-1)0.25rem
.ps-1padding-inline-start: var(--nu-space-1)0.25rem
.pe-1padding-inline-end: var(--nu-space-1)0.25rem
.p-2padding: var(--nu-space-2)0.5rem
.px-2padding-inline: var(--nu-space-2)0.5rem
.py-2padding-block: var(--nu-space-2)0.5rem
.pt-2padding-top: var(--nu-space-2)0.5rem
.pr-2padding-right: var(--nu-space-2)0.5rem
.pb-2padding-bottom: var(--nu-space-2)0.5rem
.pl-2padding-left: var(--nu-space-2)0.5rem
.ps-2padding-inline-start: var(--nu-space-2)0.5rem
.pe-2padding-inline-end: var(--nu-space-2)0.5rem
.p-3padding: var(--nu-space-3)0.75rem
.px-3padding-inline: var(--nu-space-3)0.75rem
.py-3padding-block: var(--nu-space-3)0.75rem
.pt-3padding-top: var(--nu-space-3)0.75rem
.pr-3padding-right: var(--nu-space-3)0.75rem
.pb-3padding-bottom: var(--nu-space-3)0.75rem
.pl-3padding-left: var(--nu-space-3)0.75rem
.ps-3padding-inline-start: var(--nu-space-3)0.75rem
.pe-3padding-inline-end: var(--nu-space-3)0.75rem
.p-4padding: var(--nu-space-4)1rem
.px-4padding-inline: var(--nu-space-4)1rem
.py-4padding-block: var(--nu-space-4)1rem
.pt-4padding-top: var(--nu-space-4)1rem
.pr-4padding-right: var(--nu-space-4)1rem
.pb-4padding-bottom: var(--nu-space-4)1rem
.pl-4padding-left: var(--nu-space-4)1rem
.ps-4padding-inline-start: var(--nu-space-4)1rem
.pe-4padding-inline-end: var(--nu-space-4)1rem
.p-5padding: var(--nu-space-5)1.25rem
.px-5padding-inline: var(--nu-space-5)1.25rem
.py-5padding-block: var(--nu-space-5)1.25rem
.pt-5padding-top: var(--nu-space-5)1.25rem
.pr-5padding-right: var(--nu-space-5)1.25rem
.pb-5padding-bottom: var(--nu-space-5)1.25rem
.pl-5padding-left: var(--nu-space-5)1.25rem
.ps-5padding-inline-start: var(--nu-space-5)1.25rem
.pe-5padding-inline-end: var(--nu-space-5)1.25rem
.p-6padding: var(--nu-space-6)1.5rem
.px-6padding-inline: var(--nu-space-6)1.5rem
.py-6padding-block: var(--nu-space-6)1.5rem
.pt-6padding-top: var(--nu-space-6)1.5rem
.pr-6padding-right: var(--nu-space-6)1.5rem
.pb-6padding-bottom: var(--nu-space-6)1.5rem
.pl-6padding-left: var(--nu-space-6)1.5rem
.ps-6padding-inline-start: var(--nu-space-6)1.5rem
.pe-6padding-inline-end: var(--nu-space-6)1.5rem
.p-8padding: var(--nu-space-8)2rem
.px-8padding-inline: var(--nu-space-8)2rem
.py-8padding-block: var(--nu-space-8)2rem
.pt-8padding-top: var(--nu-space-8)2rem
.pr-8padding-right: var(--nu-space-8)2rem
.pb-8padding-bottom: var(--nu-space-8)2rem
.pl-8padding-left: var(--nu-space-8)2rem
.ps-8padding-inline-start: var(--nu-space-8)2rem
.pe-8padding-inline-end: var(--nu-space-8)2rem
.p-10padding: var(--nu-space-10)2.5rem
.px-10padding-inline: var(--nu-space-10)2.5rem
.py-10padding-block: var(--nu-space-10)2.5rem
.pt-10padding-top: var(--nu-space-10)2.5rem
.pr-10padding-right: var(--nu-space-10)2.5rem
.pb-10padding-bottom: var(--nu-space-10)2.5rem
.pl-10padding-left: var(--nu-space-10)2.5rem
.ps-10padding-inline-start: var(--nu-space-10)2.5rem
.pe-10padding-inline-end: var(--nu-space-10)2.5rem
.p-12padding: var(--nu-space-12)3rem
.px-12padding-inline: var(--nu-space-12)3rem
.py-12padding-block: var(--nu-space-12)3rem
.pt-12padding-top: var(--nu-space-12)3rem
.pr-12padding-right: var(--nu-space-12)3rem
.pb-12padding-bottom: var(--nu-space-12)3rem
.pl-12padding-left: var(--nu-space-12)3rem
.ps-12padding-inline-start: var(--nu-space-12)3rem
.pe-12padding-inline-end: var(--nu-space-12)3rem
.p-16padding: var(--nu-space-16)4rem
.px-16padding-inline: var(--nu-space-16)4rem
.py-16padding-block: var(--nu-space-16)4rem
.pt-16padding-top: var(--nu-space-16)4rem
.pr-16padding-right: var(--nu-space-16)4rem
.pb-16padding-bottom: var(--nu-space-16)4rem
.pl-16padding-left: var(--nu-space-16)4rem
.ps-16padding-inline-start: var(--nu-space-16)4rem
.pe-16padding-inline-end: var(--nu-space-16)4rem
.p-20padding: var(--nu-space-20)5rem
.px-20padding-inline: var(--nu-space-20)5rem
.py-20padding-block: var(--nu-space-20)5rem
.pt-20padding-top: var(--nu-space-20)5rem
.pr-20padding-right: var(--nu-space-20)5rem
.pb-20padding-bottom: var(--nu-space-20)5rem
.pl-20padding-left: var(--nu-space-20)5rem
.ps-20padding-inline-start: var(--nu-space-20)5rem
.pe-20padding-inline-end: var(--nu-space-20)5rem
.p-24padding: var(--nu-space-24)6rem
.px-24padding-inline: var(--nu-space-24)6rem
.py-24padding-block: var(--nu-space-24)6rem
.pt-24padding-top: var(--nu-space-24)6rem
.pr-24padding-right: var(--nu-space-24)6rem
.pb-24padding-bottom: var(--nu-space-24)6rem
.pl-24padding-left: var(--nu-space-24)6rem
.ps-24padding-inline-start: var(--nu-space-24)6rem
.pe-24padding-inline-end: var(--nu-space-24)6rem
.p-32padding: var(--nu-space-32)8rem
.px-32padding-inline: var(--nu-space-32)8rem
.py-32padding-block: var(--nu-space-32)8rem
.pt-32padding-top: var(--nu-space-32)8rem
.pr-32padding-right: var(--nu-space-32)8rem
.pb-32padding-bottom: var(--nu-space-32)8rem
.pl-32padding-left: var(--nu-space-32)8rem
.ps-32padding-inline-start: var(--nu-space-32)8rem
.pe-32padding-inline-end: var(--nu-space-32)8rem
.p-40padding: var(--nu-space-40)10rem
.px-40padding-inline: var(--nu-space-40)10rem
.py-40padding-block: var(--nu-space-40)10rem
.pt-40padding-top: var(--nu-space-40)10rem
.pr-40padding-right: var(--nu-space-40)10rem
.pb-40padding-bottom: var(--nu-space-40)10rem
.pl-40padding-left: var(--nu-space-40)10rem
.ps-40padding-inline-start: var(--nu-space-40)10rem
.pe-40padding-inline-end: var(--nu-space-40)10rem
.p-48padding: var(--nu-space-48)12rem
.px-48padding-inline: var(--nu-space-48)12rem
.py-48padding-block: var(--nu-space-48)12rem
.pt-48padding-top: var(--nu-space-48)12rem
.pr-48padding-right: var(--nu-space-48)12rem
.pb-48padding-bottom: var(--nu-space-48)12rem
.pl-48padding-left: var(--nu-space-48)12rem
.ps-48padding-inline-start: var(--nu-space-48)12rem
.pe-48padding-inline-end: var(--nu-space-48)12rem
.p-56padding: var(--nu-space-56)14rem
.px-56padding-inline: var(--nu-space-56)14rem
.py-56padding-block: var(--nu-space-56)14rem
.pt-56padding-top: var(--nu-space-56)14rem
.pr-56padding-right: var(--nu-space-56)14rem
.pb-56padding-bottom: var(--nu-space-56)14rem
.pl-56padding-left: var(--nu-space-56)14rem
.ps-56padding-inline-start: var(--nu-space-56)14rem
.pe-56padding-inline-end: var(--nu-space-56)14rem
.p-64padding: var(--nu-space-64)16rem
.px-64padding-inline: var(--nu-space-64)16rem
.py-64padding-block: var(--nu-space-64)16rem
.pt-64padding-top: var(--nu-space-64)16rem
.pr-64padding-right: var(--nu-space-64)16rem
.pb-64padding-bottom: var(--nu-space-64)16rem
.pl-64padding-left: var(--nu-space-64)16rem
.ps-64padding-inline-start: var(--nu-space-64)16rem
.pe-64padding-inline-end: var(--nu-space-64)16rem
Margin (167 rules)
SelectorDeclarationsDefault value
.m-0margin: var(--nu-space-0)0
.mx-0margin-inline: var(--nu-space-0)0
.my-0margin-block: var(--nu-space-0)0
.mt-0margin-top: var(--nu-space-0)0
.mr-0margin-right: var(--nu-space-0)0
.mb-0margin-bottom: var(--nu-space-0)0
.ml-0margin-left: var(--nu-space-0)0
.ms-0margin-inline-start: var(--nu-space-0)0
.me-0margin-inline-end: var(--nu-space-0)0
.m-1margin: var(--nu-space-1)0.25rem
.mx-1margin-inline: var(--nu-space-1)0.25rem
.my-1margin-block: var(--nu-space-1)0.25rem
.mt-1margin-top: var(--nu-space-1)0.25rem
.mr-1margin-right: var(--nu-space-1)0.25rem
.mb-1margin-bottom: var(--nu-space-1)0.25rem
.ml-1margin-left: var(--nu-space-1)0.25rem
.ms-1margin-inline-start: var(--nu-space-1)0.25rem
.me-1margin-inline-end: var(--nu-space-1)0.25rem
.m-2margin: var(--nu-space-2)0.5rem
.mx-2margin-inline: var(--nu-space-2)0.5rem
.my-2margin-block: var(--nu-space-2)0.5rem
.mt-2margin-top: var(--nu-space-2)0.5rem
.mr-2margin-right: var(--nu-space-2)0.5rem
.mb-2margin-bottom: var(--nu-space-2)0.5rem
.ml-2margin-left: var(--nu-space-2)0.5rem
.ms-2margin-inline-start: var(--nu-space-2)0.5rem
.me-2margin-inline-end: var(--nu-space-2)0.5rem
.m-3margin: var(--nu-space-3)0.75rem
.mx-3margin-inline: var(--nu-space-3)0.75rem
.my-3margin-block: var(--nu-space-3)0.75rem
.mt-3margin-top: var(--nu-space-3)0.75rem
.mr-3margin-right: var(--nu-space-3)0.75rem
.mb-3margin-bottom: var(--nu-space-3)0.75rem
.ml-3margin-left: var(--nu-space-3)0.75rem
.ms-3margin-inline-start: var(--nu-space-3)0.75rem
.me-3margin-inline-end: var(--nu-space-3)0.75rem
.m-4margin: var(--nu-space-4)1rem
.mx-4margin-inline: var(--nu-space-4)1rem
.my-4margin-block: var(--nu-space-4)1rem
.mt-4margin-top: var(--nu-space-4)1rem
.mr-4margin-right: var(--nu-space-4)1rem
.mb-4margin-bottom: var(--nu-space-4)1rem
.ml-4margin-left: var(--nu-space-4)1rem
.ms-4margin-inline-start: var(--nu-space-4)1rem
.me-4margin-inline-end: var(--nu-space-4)1rem
.m-5margin: var(--nu-space-5)1.25rem
.mx-5margin-inline: var(--nu-space-5)1.25rem
.my-5margin-block: var(--nu-space-5)1.25rem
.mt-5margin-top: var(--nu-space-5)1.25rem
.mr-5margin-right: var(--nu-space-5)1.25rem
.mb-5margin-bottom: var(--nu-space-5)1.25rem
.ml-5margin-left: var(--nu-space-5)1.25rem
.ms-5margin-inline-start: var(--nu-space-5)1.25rem
.me-5margin-inline-end: var(--nu-space-5)1.25rem
.m-6margin: var(--nu-space-6)1.5rem
.mx-6margin-inline: var(--nu-space-6)1.5rem
.my-6margin-block: var(--nu-space-6)1.5rem
.mt-6margin-top: var(--nu-space-6)1.5rem
.mr-6margin-right: var(--nu-space-6)1.5rem
.mb-6margin-bottom: var(--nu-space-6)1.5rem
.ml-6margin-left: var(--nu-space-6)1.5rem
.ms-6margin-inline-start: var(--nu-space-6)1.5rem
.me-6margin-inline-end: var(--nu-space-6)1.5rem
.m-8margin: var(--nu-space-8)2rem
.mx-8margin-inline: var(--nu-space-8)2rem
.my-8margin-block: var(--nu-space-8)2rem
.mt-8margin-top: var(--nu-space-8)2rem
.mr-8margin-right: var(--nu-space-8)2rem
.mb-8margin-bottom: var(--nu-space-8)2rem
.ml-8margin-left: var(--nu-space-8)2rem
.ms-8margin-inline-start: var(--nu-space-8)2rem
.me-8margin-inline-end: var(--nu-space-8)2rem
.m-10margin: var(--nu-space-10)2.5rem
.mx-10margin-inline: var(--nu-space-10)2.5rem
.my-10margin-block: var(--nu-space-10)2.5rem
.mt-10margin-top: var(--nu-space-10)2.5rem
.mr-10margin-right: var(--nu-space-10)2.5rem
.mb-10margin-bottom: var(--nu-space-10)2.5rem
.ml-10margin-left: var(--nu-space-10)2.5rem
.ms-10margin-inline-start: var(--nu-space-10)2.5rem
.me-10margin-inline-end: var(--nu-space-10)2.5rem
.m-12margin: var(--nu-space-12)3rem
.mx-12margin-inline: var(--nu-space-12)3rem
.my-12margin-block: var(--nu-space-12)3rem
.mt-12margin-top: var(--nu-space-12)3rem
.mr-12margin-right: var(--nu-space-12)3rem
.mb-12margin-bottom: var(--nu-space-12)3rem
.ml-12margin-left: var(--nu-space-12)3rem
.ms-12margin-inline-start: var(--nu-space-12)3rem
.me-12margin-inline-end: var(--nu-space-12)3rem
.m-16margin: var(--nu-space-16)4rem
.mx-16margin-inline: var(--nu-space-16)4rem
.my-16margin-block: var(--nu-space-16)4rem
.mt-16margin-top: var(--nu-space-16)4rem
.mr-16margin-right: var(--nu-space-16)4rem
.mb-16margin-bottom: var(--nu-space-16)4rem
.ml-16margin-left: var(--nu-space-16)4rem
.ms-16margin-inline-start: var(--nu-space-16)4rem
.me-16margin-inline-end: var(--nu-space-16)4rem
.m-20margin: var(--nu-space-20)5rem
.mx-20margin-inline: var(--nu-space-20)5rem
.my-20margin-block: var(--nu-space-20)5rem
.mt-20margin-top: var(--nu-space-20)5rem
.mr-20margin-right: var(--nu-space-20)5rem
.mb-20margin-bottom: var(--nu-space-20)5rem
.ml-20margin-left: var(--nu-space-20)5rem
.ms-20margin-inline-start: var(--nu-space-20)5rem
.me-20margin-inline-end: var(--nu-space-20)5rem
.m-24margin: var(--nu-space-24)6rem
.mx-24margin-inline: var(--nu-space-24)6rem
.my-24margin-block: var(--nu-space-24)6rem
.mt-24margin-top: var(--nu-space-24)6rem
.mr-24margin-right: var(--nu-space-24)6rem
.mb-24margin-bottom: var(--nu-space-24)6rem
.ml-24margin-left: var(--nu-space-24)6rem
.ms-24margin-inline-start: var(--nu-space-24)6rem
.me-24margin-inline-end: var(--nu-space-24)6rem
.m-32margin: var(--nu-space-32)8rem
.mx-32margin-inline: var(--nu-space-32)8rem
.my-32margin-block: var(--nu-space-32)8rem
.mt-32margin-top: var(--nu-space-32)8rem
.mr-32margin-right: var(--nu-space-32)8rem
.mb-32margin-bottom: var(--nu-space-32)8rem
.ml-32margin-left: var(--nu-space-32)8rem
.ms-32margin-inline-start: var(--nu-space-32)8rem
.me-32margin-inline-end: var(--nu-space-32)8rem
.m-40margin: var(--nu-space-40)10rem
.mx-40margin-inline: var(--nu-space-40)10rem
.my-40margin-block: var(--nu-space-40)10rem
.mt-40margin-top: var(--nu-space-40)10rem
.mr-40margin-right: var(--nu-space-40)10rem
.mb-40margin-bottom: var(--nu-space-40)10rem
.ml-40margin-left: var(--nu-space-40)10rem
.ms-40margin-inline-start: var(--nu-space-40)10rem
.me-40margin-inline-end: var(--nu-space-40)10rem
.m-48margin: var(--nu-space-48)12rem
.mx-48margin-inline: var(--nu-space-48)12rem
.my-48margin-block: var(--nu-space-48)12rem
.mt-48margin-top: var(--nu-space-48)12rem
.mr-48margin-right: var(--nu-space-48)12rem
.mb-48margin-bottom: var(--nu-space-48)12rem
.ml-48margin-left: var(--nu-space-48)12rem
.ms-48margin-inline-start: var(--nu-space-48)12rem
.me-48margin-inline-end: var(--nu-space-48)12rem
.m-56margin: var(--nu-space-56)14rem
.mx-56margin-inline: var(--nu-space-56)14rem
.my-56margin-block: var(--nu-space-56)14rem
.mt-56margin-top: var(--nu-space-56)14rem
.mr-56margin-right: var(--nu-space-56)14rem
.mb-56margin-bottom: var(--nu-space-56)14rem
.ml-56margin-left: var(--nu-space-56)14rem
.ms-56margin-inline-start: var(--nu-space-56)14rem
.me-56margin-inline-end: var(--nu-space-56)14rem
.m-64margin: var(--nu-space-64)16rem
.mx-64margin-inline: var(--nu-space-64)16rem
.my-64margin-block: var(--nu-space-64)16rem
.mt-64margin-top: var(--nu-space-64)16rem
.mr-64margin-right: var(--nu-space-64)16rem
.mb-64margin-bottom: var(--nu-space-64)16rem
.ml-64margin-left: var(--nu-space-64)16rem
.ms-64margin-inline-start: var(--nu-space-64)16rem
.me-64margin-inline-end: var(--nu-space-64)16rem
.mx-automargin-inline: autoauto
.ml-automargin-left: autoauto
.mr-automargin-right: autoauto
.ms-automargin-inline-start: autoauto
.me-automargin-inline-end: autoauto
Gap (90 rules)
SelectorDeclarationsDefault value
.gap-0gap: var(--nu-space-0)0
.gap-0 > *--nu-flex-gap: var(--nu-space-0)0
.gap-x-0column-gap: var(--nu-space-0)0
.gap-x-0 > *--nu-flex-gap: var(--nu-space-0)0
.gap-y-0row-gap: var(--nu-space-0)0
.gap-1gap: var(--nu-space-1)0.25rem
.gap-1 > *--nu-flex-gap: var(--nu-space-1)0.25rem
.gap-x-1column-gap: var(--nu-space-1)0.25rem
.gap-x-1 > *--nu-flex-gap: var(--nu-space-1)0.25rem
.gap-y-1row-gap: var(--nu-space-1)0.25rem
.gap-2gap: var(--nu-space-2)0.5rem
.gap-2 > *--nu-flex-gap: var(--nu-space-2)0.5rem
.gap-x-2column-gap: var(--nu-space-2)0.5rem
.gap-x-2 > *--nu-flex-gap: var(--nu-space-2)0.5rem
.gap-y-2row-gap: var(--nu-space-2)0.5rem
.gap-3gap: var(--nu-space-3)0.75rem
.gap-3 > *--nu-flex-gap: var(--nu-space-3)0.75rem
.gap-x-3column-gap: var(--nu-space-3)0.75rem
.gap-x-3 > *--nu-flex-gap: var(--nu-space-3)0.75rem
.gap-y-3row-gap: var(--nu-space-3)0.75rem
.gap-4gap: var(--nu-space-4)1rem
.gap-4 > *--nu-flex-gap: var(--nu-space-4)1rem
.gap-x-4column-gap: var(--nu-space-4)1rem
.gap-x-4 > *--nu-flex-gap: var(--nu-space-4)1rem
.gap-y-4row-gap: var(--nu-space-4)1rem
.gap-5gap: var(--nu-space-5)1.25rem
.gap-5 > *--nu-flex-gap: var(--nu-space-5)1.25rem
.gap-x-5column-gap: var(--nu-space-5)1.25rem
.gap-x-5 > *--nu-flex-gap: var(--nu-space-5)1.25rem
.gap-y-5row-gap: var(--nu-space-5)1.25rem
.gap-6gap: var(--nu-space-6)1.5rem
.gap-6 > *--nu-flex-gap: var(--nu-space-6)1.5rem
.gap-x-6column-gap: var(--nu-space-6)1.5rem
.gap-x-6 > *--nu-flex-gap: var(--nu-space-6)1.5rem
.gap-y-6row-gap: var(--nu-space-6)1.5rem
.gap-8gap: var(--nu-space-8)2rem
.gap-8 > *--nu-flex-gap: var(--nu-space-8)2rem
.gap-x-8column-gap: var(--nu-space-8)2rem
.gap-x-8 > *--nu-flex-gap: var(--nu-space-8)2rem
.gap-y-8row-gap: var(--nu-space-8)2rem
.gap-10gap: var(--nu-space-10)2.5rem
.gap-10 > *--nu-flex-gap: var(--nu-space-10)2.5rem
.gap-x-10column-gap: var(--nu-space-10)2.5rem
.gap-x-10 > *--nu-flex-gap: var(--nu-space-10)2.5rem
.gap-y-10row-gap: var(--nu-space-10)2.5rem
.gap-12gap: var(--nu-space-12)3rem
.gap-12 > *--nu-flex-gap: var(--nu-space-12)3rem
.gap-x-12column-gap: var(--nu-space-12)3rem
.gap-x-12 > *--nu-flex-gap: var(--nu-space-12)3rem
.gap-y-12row-gap: var(--nu-space-12)3rem
.gap-16gap: var(--nu-space-16)4rem
.gap-16 > *--nu-flex-gap: var(--nu-space-16)4rem
.gap-x-16column-gap: var(--nu-space-16)4rem
.gap-x-16 > *--nu-flex-gap: var(--nu-space-16)4rem
.gap-y-16row-gap: var(--nu-space-16)4rem
.gap-20gap: var(--nu-space-20)5rem
.gap-20 > *--nu-flex-gap: var(--nu-space-20)5rem
.gap-x-20column-gap: var(--nu-space-20)5rem
.gap-x-20 > *--nu-flex-gap: var(--nu-space-20)5rem
.gap-y-20row-gap: var(--nu-space-20)5rem
.gap-24gap: var(--nu-space-24)6rem
.gap-24 > *--nu-flex-gap: var(--nu-space-24)6rem
.gap-x-24column-gap: var(--nu-space-24)6rem
.gap-x-24 > *--nu-flex-gap: var(--nu-space-24)6rem
.gap-y-24row-gap: var(--nu-space-24)6rem
.gap-32gap: var(--nu-space-32)8rem
.gap-32 > *--nu-flex-gap: var(--nu-space-32)8rem
.gap-x-32column-gap: var(--nu-space-32)8rem
.gap-x-32 > *--nu-flex-gap: var(--nu-space-32)8rem
.gap-y-32row-gap: var(--nu-space-32)8rem
.gap-40gap: var(--nu-space-40)10rem
.gap-40 > *--nu-flex-gap: var(--nu-space-40)10rem
.gap-x-40column-gap: var(--nu-space-40)10rem
.gap-x-40 > *--nu-flex-gap: var(--nu-space-40)10rem
.gap-y-40row-gap: var(--nu-space-40)10rem
.gap-48gap: var(--nu-space-48)12rem
.gap-48 > *--nu-flex-gap: var(--nu-space-48)12rem
.gap-x-48column-gap: var(--nu-space-48)12rem
.gap-x-48 > *--nu-flex-gap: var(--nu-space-48)12rem
.gap-y-48row-gap: var(--nu-space-48)12rem
.gap-56gap: var(--nu-space-56)14rem
.gap-56 > *--nu-flex-gap: var(--nu-space-56)14rem
.gap-x-56column-gap: var(--nu-space-56)14rem
.gap-x-56 > *--nu-flex-gap: var(--nu-space-56)14rem
.gap-y-56row-gap: var(--nu-space-56)14rem
.gap-64gap: var(--nu-space-64)16rem
.gap-64 > *--nu-flex-gap: var(--nu-space-64)16rem
.gap-x-64column-gap: var(--nu-space-64)16rem
.gap-x-64 > *--nu-flex-gap: var(--nu-space-64)16rem
.gap-y-64row-gap: var(--nu-space-64)16rem
Space between children (36 rules)
SelectorDeclarationsDefault value
.space-x-0 > * + *margin-inline-start: var(--nu-space-0)0
.space-y-0 > * + *margin-block-start: var(--nu-space-0)0
.space-x-1 > * + *margin-inline-start: var(--nu-space-1)0.25rem
.space-y-1 > * + *margin-block-start: var(--nu-space-1)0.25rem
.space-x-2 > * + *margin-inline-start: var(--nu-space-2)0.5rem
.space-y-2 > * + *margin-block-start: var(--nu-space-2)0.5rem
.space-x-3 > * + *margin-inline-start: var(--nu-space-3)0.75rem
.space-y-3 > * + *margin-block-start: var(--nu-space-3)0.75rem
.space-x-4 > * + *margin-inline-start: var(--nu-space-4)1rem
.space-y-4 > * + *margin-block-start: var(--nu-space-4)1rem
.space-x-5 > * + *margin-inline-start: var(--nu-space-5)1.25rem
.space-y-5 > * + *margin-block-start: var(--nu-space-5)1.25rem
.space-x-6 > * + *margin-inline-start: var(--nu-space-6)1.5rem
.space-y-6 > * + *margin-block-start: var(--nu-space-6)1.5rem
.space-x-8 > * + *margin-inline-start: var(--nu-space-8)2rem
.space-y-8 > * + *margin-block-start: var(--nu-space-8)2rem
.space-x-10 > * + *margin-inline-start: var(--nu-space-10)2.5rem
.space-y-10 > * + *margin-block-start: var(--nu-space-10)2.5rem
.space-x-12 > * + *margin-inline-start: var(--nu-space-12)3rem
.space-y-12 > * + *margin-block-start: var(--nu-space-12)3rem
.space-x-16 > * + *margin-inline-start: var(--nu-space-16)4rem
.space-y-16 > * + *margin-block-start: var(--nu-space-16)4rem
.space-x-20 > * + *margin-inline-start: var(--nu-space-20)5rem
.space-y-20 > * + *margin-block-start: var(--nu-space-20)5rem
.space-x-24 > * + *margin-inline-start: var(--nu-space-24)6rem
.space-y-24 > * + *margin-block-start: var(--nu-space-24)6rem
.space-x-32 > * + *margin-inline-start: var(--nu-space-32)8rem
.space-y-32 > * + *margin-block-start: var(--nu-space-32)8rem
.space-x-40 > * + *margin-inline-start: var(--nu-space-40)10rem
.space-y-40 > * + *margin-block-start: var(--nu-space-40)10rem
.space-x-48 > * + *margin-inline-start: var(--nu-space-48)12rem
.space-y-48 > * + *margin-block-start: var(--nu-space-48)12rem
.space-x-56 > * + *margin-inline-start: var(--nu-space-56)14rem
.space-y-56 > * + *margin-block-start: var(--nu-space-56)14rem
.space-x-64 > * + *margin-inline-start: var(--nu-space-64)16rem
.space-y-64 > * + *margin-block-start: var(--nu-space-64)16rem

Accessibility and RTL

Section titled “Accessibility and RTL”
  • Mirror with logical utilities. Use ps, pe, ms, me, px, mx and space-x for anything that should follow the reading direction. A right-to-left page then needs only dir="rtl", not a second set of classes.
  • Keep physical utilities deliberate. Reserve pl, pr, ml, mr for content that must stay on the same side in every language.
  • Spacing is not structure. Do not use margins or empty elements to express grouping that a screen reader needs; use headings, lists and landmarks, and let spacing reflect that structure visually.
  • Targets and text zoom. The scale is in rem, so spacing grows with the user’s font size. Padding on interactive elements helps them reach a comfortable target size (WCAG 2.2, 2.5.8 Target Size, at least 24 by 24 CSS pixels).
  • Reflow. Prefer gap-* with wrapping flex or grid layouts over fixed margins, so content reflows at narrow widths and 400% zoom (WCAG 1.4.10).