Spacing

Used to define spacing values

Custom scale

Our spacing values are derived from our 4px baseline grid. Instead of using pixels, we have defined our own custom units and a new scale. This helps us in abstracting away from the technical details and ensuring scalability across products.

With our new scale, spacing units are set in multiples of 4 i.e. 1 unit = 4px.

Class Reference

Spacing classes take on the syntax of .{property}-{spacing value}. Spacing values can range from 0-15 i.e. 0px - 60px.

Margin

Class
Output
.m-1
margin: 4px;
.mt-1
margin-top: 4px;
.mr-1
margin-right: 4px;
.mb-1
margin-bottom: 4px;
.ml-1
margin-left: 4px;
.mx-1
margin-left: 4px;

margin-right: 4px;
.my-1
margin-top: 4px;

margin-bottom: 4px;
.nmt-1
margin-top: -4px;
.nmr-1
margin-right: -4px;
.nmb-1
margin-bottom: -4px;
.nml-1
margin-left: -4px;
.nmx-1
margin-left: -4px;

margin-right: -4px;
.nmy-1
margin-top: -4px;

margin-bottom: -4px;
.m-auto
margin: auto;

Example

This is a box with some margin applied
<div class="mr-2 mt-12 ml-4"></div>

Padding

Class
Output
.p-1
padding: 4px;
.pt-1
padding-top: 4px;
.pr-1
padding-right: 4px;
.pb-1
padding-bottom: 4px;
.pl-1
padding-left: 4px;
.px-1
padding-left: 4px;

padding-right: 4px;
.py-1
padding-top: 4px;

padding-bottom: 4px;

Example

This is a box with some padding applied
<div class="pt-4 pb-1 pl-1 pr-2"></div>
Back to: Sizing
See next: Typography

CONTENTS