# Margin

{% hint style="info" %}
Since `1.0.0`
{% endhint %}

## Class

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

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

## Code Sample

#### Margin top = 4 unit

```markup
<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

```markup
<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

```markup
<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

```markup
<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

```markup
<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` |