Links

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