Margin

Since 1.0.0

Class

.margin--{ auto | t | r | b | l | a }--{number}

.m{ t | r | b | l | a }--{number}

Code Sample

Margin top = 4 unit

<p class="mt--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.mt--4</kbd> or <kbd>.margin--t--4</kbd> class.
</p>

Margin right = 4 unit

<p class="margin--r--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.mr--4</kbd> or <kbd>.margin--r--4</kbd> class.
</p>

Margin bottom = 4 unit

<p class="mb--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.mb--4</kbd> or <kbd>.margin--b--4</kbd> class.
</p>

Margin left = 4 unit

<p class="margin--l--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.ml--4</kbd> or <kbd>.margin--l--4</kbd> class.
</p>

Margin = 4 unit

<p class="ma--4 bg--gainsboro rounded--6 pa--1">
    Paragraph section with <kbd>.ma--4</kbd> or <kbd>.margin--4</kbd> class.
</p>

Variable

Class	Properties
.margin--{ auto | t | r | b | l | a }--1	margin: 1rem
.margin--{ auto | t | r | b | l | a }--2	margin: 2rem
.margin--{ auto | t | r | b | l | a }--3	margin: 3rem
.margin--{ auto | t | r | b | l | a }--4	margin: 4rem
.margin--{ auto | t | r | b | l | a }--5	margin: 5rem
.margin--{ auto | t | r | b | l | a }--6	margin: 6rem
.margin--{ auto | t | r | b | l | a }--7	margin: 7rem
.margin--{ auto | t | r | b | l | a }--8	margin: 8rem
.margin--{ auto | t | r | b | l | a }--9	margin: 9rem
.margin--{ auto | t | r | b | l | a }--10	margin: 10rem