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