Spacing

Ready to use

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.

Tip

All spacing properties use logical directions (block / inline instead of top / left). This means they automatically adapt to the writing direction — no extra work needed for RTL support.

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 .tng-scheme wrapper.

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

Note

These values are for the brand selected at the top of the page. A semantic token can resolve to a different value per brand.

none

0px

3xs

2px

2xs

4px

xs

6px

sm

8px

md

10px

lg

12px

xl

16px

2xl

20px

3xl

24px

4xl

32px

5xl

40px

6xl

44px

7xl

48px

8xl

56px

9xl

64px

10xl

72px

11xl

80px

12xl

88px

13xl

96px

14xl

104px

15xl

120px

16xl

140px

17xl

160px

18xl

240px

none

0px

3xs

2px

2xs

4px

xs

6px

sm

8px

md

10px

lg

12px

xl

16px

2xl

20px

3xl

24px

4xl

32px

5xl

40px

6xl

44px

7xl

48px

8xl

56px

9xl

64px

10xl

72px

11xl

80px

12xl

88px

13xl

96px

14xl

104px

15xl

120px

16xl

140px

17xl

160px

18xl

240px

none

0px

3xs

2px

2xs

4px

xs

6px

sm

8px

md

10px

lg

12px

xl

16px

2xl

20px

3xl

24px

4xl

32px

5xl

40px

6xl

44px

7xl

48px

8xl

56px

9xl

64px

10xl

72px

11xl

80px

12xl

88px

13xl

96px

14xl

104px

15xl

120px

16xl

140px

17xl

160px

18xl

240px

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>

Open in playground

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.