Spacing

Caution

Status: Alpha (learn more)

Margin

You can use the margin utilities to control the spacing around the Wrapper layout component.

• m-<size>: set margin
• mb-<size>: set margin-block
• mbs-<size>: set margin-block-start
• mbe-<size>: set margin-block-end
• mi-<auto|size>: set margin-inline
• mis-<auto|size>: set margin-inline-start
• mie-<auto|size>: set margin-inline-end

Padding

You can use the padding utilities to control the spacing inside Surface core component.

• p-<size>: set padding
• pb-<size>: set padding-block
• pbs-<size>: set padding-block-start
• pbe-<size>: set padding-block-end
• pi-<size>: set padding-inline
• pis-<size>: set padding-inline-start
• pie-<size>: set padding-inline-end

Spacing

none

2xs

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

10xl

11xl

12xl

13xl

14xl

15xl

16xl

17xl

18xl

Tokens

You can find the spacing tokens in the tokens reference.