foundations / null

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:

.p-0.p-half.p-1.p-2.p-3.p-4.p-5
.m-0
.m-half
.m-1
.m-2
.m-3
.m-4
.m-5

Directional Examples

.m-t-3
.m-r-3
.m-b-3
.m-l-3
.m-b-3
.p-x-3.p-y-3
.p-y-2.m-y-3
.m-x-auto

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