# Padding

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

## Class

```css
.padding--{ t | r | b | l | a }--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}
```

## Code Sample

#### Padding top = 4 unit

```markup
<div class="pt--4 bg--plum rounded--6"><p class="bg--gainsboro pa--1">
    Paragraph section with <kbd>.pt--4</kbd> or <kbd>.padding--t--4</kbd> class.</p>
</div>
```

## Variable

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