This is the Standard reference for spacing.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
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