This is the Standard reference for spacing.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
padding
Interactive example.
Vocabulary 1. Prefixes: p. Example: p:1x. It emits padding:var(--spacing-1x);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (18)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 0, 0.5, 10,
10px, 10%, [2px_4px], [calc(1rem_+_2px)], $padding, $padding|2px
Vocabulary 2. Prefixes: p-x, p-y, p-inline, p-block, p-s, p-e, p-u, p-n, p-t, p-r, p-b, p-l. Example: p-x:1x. It emits padding-left:var(--spacing-1x);padding-right:var(--spacing-1x);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 0, 4, [2px],
$padding
margin
Interactive example.
Prefixes: m, m-x, m-y, m-inline, m-block, m-s, m-e, m-u, m-n, m-t, m-r, m-b, m-l. Example: m:1x. It emits margin:var(--spacing-1x);.
Documented values (10)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, auto
space
Interactive example. Rule type: composer.
Prefixes: space-x, space-y, space-inline, space-block. Example: space-x:1x. It emits --T-space-x-reverse:0;margin-left: calc(var(--spacing-1x) * var(--T-space-x-reverse));margin-right: calc(var(--spacing-1x) * calc(1 - var(--T-space-x-reverse)));.
Documented values (9)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x
inset
Interactive example.
Prefixes: i, i-x, i-y, i-inline, i-block, i-s, i-e, i-u, i-n, i-t, i-r, i-b, i-l. Example: i:auto. It emits inset:auto;.
Documented values (20)
auto, 0, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, -1x,
-2x, -3x, -4x, -5x, -6x, -7x, -8x, -9x