Spacing
Spacing Overview
Anvil uses partials amounts of a base-8 spacing scale. A half value of 4px is also included. The scale starts at 8px, scaling up to 128px.
CSS Utilities
Anvil provides utility classes and variables for common spacing needs.
Spacing
Variable
Scale
Value
$spacing-0
0
0
$spacing-half
half
4px
$spacing-1
1
8px
$spacing-2
2
16px
$spacing-3
3
24px
Variable
Scale
Value
$spacing-4
4
32px
$spacing-5
5
48px
$spacing-6
6
64px
$spacing-7
7
96px
$spacing-8
8
128px
Margins & Padding
Utility classes for margins and paddings exist. The format is .p-<scale> for padding, and .m-<scale> for margin.
Examples:
Directional Examples
Table breakdown of utility classes
Shorthand
Description
m
margin
p
padding
t
top
r
right
b
bottom
l
left
x
left & right
y
top & bottom
0
0px
half
4px
1
8px
2
16px
3
24px
4
32px
5
48px
6
64px
7
96px
8
128px
auto
auto