Margin
Since 1.0.0

Class

1
.margin--{ auto | t | r | b | l | a }--{number}
Copied!
1
.m{ t | r | b | l | a }--{number}
Copied!

Code Sample

Margin top = 4 unit

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

Margin right = 4 unit

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

Margin bottom = 4 unit

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

Margin left = 4 unit

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

Margin = 4 unit

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

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
Last modified 1yr ago
Copy link