Spacing Overview

<img src="/images/spacing/scale-example.png" style={{width: '100%'}} />

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

VariableScaleValue
$spacing-000
$spacing-halfhalf4px
$spacing-118px
$spacing-2216px
$spacing-3324px
VariableScaleValue
$spacing-4432px
$spacing-5548px
$spacing-6664px
$spacing-7796px
$spacing-88128px

Margins & Padding

Utility classes for margins and paddings exist. The format is .p-<scale> for padding, and .m-<scale> for margin.

Examples:

<div className="bg-white d-f align-items-center justify-content-between p-3" style={{height: '120px'}}>
    <span className="bg-green-200 p-0">
        <span className="bg-blue-200">.p-0</span>
    </span>
    <span className="bg-green-200 p-half">
        <span className="bg-blue-200">.p-half</span>
    </span>
    <span className="bg-green-200 p-1">
        <span className="bg-blue-200">.p-1</span>
    </span>
    <span className="bg-green-200 p-2">
        <span className="bg-blue-200">.p-2</span>
    </span>
    <span className="bg-green-200 p-3">
        <span className="bg-blue-200">.p-3</span>
    </span>
    <span className="bg-green-200 p-4">
        <span className="bg-blue-200">.p-4</span>
    </span>
    <span className="bg-green-200 p-5">
        <span className="bg-blue-200">.p-5</span>
    </span>
</div>
<div className="bg-white d-f align-items-center justify-content-between p-3" style={{height: '120px'}}>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-0">.m-0</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-half">.m-half</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-1">.m-1</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-2">.m-2</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-3">.m-3</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-4">.m-4</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-5">.m-5</div>
    </div>
</div>

Directional Examples

<div className="bg-white d-f align-items-center justify-content-between p-3" style={{height: '120px'}}>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-t-3">.m-t-3</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-r-3">.m-r-3</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-b-3">.m-b-3</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-l-3">.m-l-3</div>
    </div>
    <div className="bg-orange-200">
        <div className="bg-blue-200 m-b-3">.m-b-3</div>
    </div>
    <span className="bg-green-200 p-x-3">
        <span className="bg-blue-200">.p-x-3</span>
    </span>
    <span className="bg-green-200 p-y-3">
        <span className="bg-blue-200">.p-y-3</span>
    </span>
    <div className="bg-white d-f align-items-center justify-content-between p-3" style={{height: '80px'}}>
        <div className="bg-orange-200"><div className="bg-green-200 p-y-2 m-y-3">
            <div className="bg-blue-200">.p-y-2.m-y-3</div>
            </div>
        </div>
    </div>
</div>
<div className="bg-white d-f align-items-center justify-content-between p-3" style={{height: '80px'}}>
    <div className="bg-orange-200 w-100">
        <div className="bg-blue-200 m-x-auto" style={{textAlign: 'center', width: '5em'}}>.m-x-auto</div>
    </div>
</div>

Table breakdown of utility classes

ShorthandDescription
mmargin
ppadding
ttop
rright
bbottom
lleft
xleft & right
ytop & bottom
00px
half4px
18px
216px
324px
432px
548px
664px
796px
8128px
autoauto