Spacing

Defines the relationship between elements and makes the content more easily scannable.

Token

CSS Variable

Value

Preview

$space-0

--sl-space-0

0rem

$space-1

--sl-space-1

0.25rem

$space-2

--sl-space-2

0.5rem

$space-3

--sl-space-3

0.75rem

$space-4

--sl-space-4

1rem

$space-5

--sl-space-5

1.25rem

$space-6

--sl-space-6

1.5rem

$space-7

--sl-space-7

1.75rem

$space-8

--sl-space-8

2rem

$space-10

--sl-space-10

2.5rem

$space-12

--sl-space-12

3rem

$space-16

--sl-space-16

4rem

$space-20

--sl-space-20

5rem

$space-24

--sl-space-24

6rem

$space-28

--sl-space-28

7rem

$space-32

--sl-space-32

8rem

$space-05

--sl-space-05

0.125rem

$space-gap

--sl-space-gap

var(--sl-space-4)

Rationale Rationale