Spacing

Spacing utilities control margin and padding using consistent spacing tokens. They work through custom properties, which means they can be composed, overridden per-element, and consumed by layout components automatically.

Custom properties

Margin

--tng-margin — all sides
--tng-margin-block — block axis (top + bottom)
--tng-margin-block-start / --tng-margin-block-end
--tng-margin-inline — inline axis (left + right)
--tng-margin-inline-start / --tng-margin-inline-end

Padding

--tng-padding — all sides
--tng-padding-block — block axis (top + bottom)
--tng-padding-block-start / --tng-padding-block-end
--tng-padding-inline — inline axis (left + right)
--tng-padding-inline-start / --tng-padding-inline-end

These can be combined with other utilities, overridden in descendant elements or inline styles, or set directly to any value: style="--tng-padding: 1rem;". The Box component and layout components consume these properties automatically.

Margin

Margin utilities control the outer spacing of an element. They are commonly used on the Wrapper layout component.

Prefix	Property	Example
`m-`	margin (all sides)	`.m-md`
`mb-`	margin-block	`.mb-lg`
`mbs-`	margin-block-start	`.mbs-xl`
`mbe-`	margin-block-end	`.mbe-sm`
`mi-`	margin-inline	`.mi-auto`
`mis-`	margin-inline-start	`.mis-md`
`mie-`	margin-inline-end	`.mie-md`

The inline margin utilities also support auto as a value (e.g. .mi-auto) for centering elements horizontally.

Padding

Padding utilities control the inner spacing of an element. They are commonly used on the Box foundations component.

Prefix	Property	Example
`p-`	padding (all sides)	`.p-md`
`pb-`	padding-block	`.pb-lg`
`pbs-`	padding-block-start	`.pbs-xl`
`pbe-`	padding-block-end	`.pbe-sm`
`pi-`	padding-inline	`.pi-md`
`pis-`	padding-inline-start	`.pis-lg`
`pie-`	padding-inline-end	`.pie-lg`

Available sizes

Each prefix can be combined with the following spacing scale. These values come from the spacing tokens and are shared with gap and inset utilities.

Size	Token
`none`	`--tng-spacing-none` (0)
`2xs`	`--tng-spacing-2xs`
`xs`	`--tng-spacing-xs`
`sm`	`--tng-spacing-sm`
`md`	`--tng-spacing-md`
`lg`	`--tng-spacing-lg`
`xl`	`--tng-spacing-xl`
`2xl`	`--tng-spacing-2xl`
`3xl`	`--tng-spacing-3xl`
…	Continues up to `18xl`

See the full spacing tokens reference for exact values per brand.

Spacing scale

none

2xs

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

10xl

11xl

12xl

13xl

14xl

15xl

16xl

17xl

18xl

How the cascade works

Spacing utilities follow a shorthand → longhand cascade via custom property fallbacks:

margin-block-start = --tng-margin-block-start
                   → --tng-margin-block
                   → --tng-margin
                   → 0

This means you can set .p-md for uniform padding, then override just one side with .pbs-xl — and it works as expected because the more specific property takes precedence.

<!-- 'md' padding on all sides, except 'xl' on top -->
<div class="tng-box p-md pbs-xl">…</div>

Best practices

Use logical properties — the b (block) and i (inline) prefixes adapt to writing direction. Avoid styling top / left directly unless you have a specific physical-direction need.
Stick to the scale — the spacing tokens are designed to work harmoniously together. Avoid hard-coded pixel or rem values.
Use .mi-auto for centering — instead of margin: 0 auto, use .mi-auto on a Wrapper to center it horizontally.
Combine padding with Box — the Box component applies the padding mixin automatically. Just add a class like .p-lg and it works.