Spacing

Spacing utilities control margin and padding using consistent spacing tokens. They set CSS properties directly on the element, using values from the spacing tokens scale.

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)
`3xs`	`--tng-spacing-3xs`
`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

3xs

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 set CSS properties directly. When multiple utilities target the same property, normal CSS cascade rules apply — the utility layer ensures they override component defaults.

You can combine shorthand and longhand utilities:

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

The longhand pbs-xl (padding-block-start) overrides the shorthand p-md (padding) for the block-start side, following standard CSS shorthand/longhand resolution.

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.