---
layout: docs
title: Padding
description: null
---

| Class         | Description                                     |
| ------------- | ----------------------------------------------- |
| `padding-xxl` | Applies `padding: var(--space-xxl);` to element |
| `padding-xl`  | Applies `padding: var(--space-xl);` to element  |
| `padding-l`   | Applies `padding: var(--space-l);` to element   |
| `padding-m`   | Applies `padding: var(--space-m);` to element   |
| `padding-s`   | Applies `padding: var(--space-s);` to element   |
| `padding-xs`  | Applies `padding: var(--space-xs);` to element  |
| `padding-xxs` | Applies `padding: var(--space-xxs);` to element |

## No Padding

| Class                   | Description                                                                                   |
| ----------------------- | --------------------------------------------------------------------------------------------- |
| `no-padding`            | Removes padding. **Note:** `!important` is used to override specificity issues                |
| `no-padding-vertical`   | Removes padding top and bottom. **Note:** `!important` is used to override specificity issues |
| `no-padding-horizontal` | Removes padding left and right. **Note:** `!important` is used to override specificity issues |
| `no-padding-top`        | Removes top padding. **Note:** `!important` is used to override specificity issues            |
| `no-padding-right`      | Removes right padding. **Note:** `!important` is used to override specificity issues          |
| `no-padding-bottom`     | Removes bottom padding. **Note:** `!important` is used to override specificity issues         |
| `no-padding-left`       | Removes left padding. **Note:** `!important` is used to override specificity issues           |

## Padding Auto

| Class                     | Description                                                         |
| ------------------------- | ------------------------------------------------------------------- |
| `padding-auto`            | Applies `padding: auto;` to element                                 |
| `padding-vertical-auto`   | Applies `padding-top: auto;` and `padding-bottom: auto;` to element |
| `padding-horizontal-auto` | Applies `padding-left: auto;` and `padding-right: auto;` to element |
| `padding-top-auto`        | Applies `padding-top: auto;` to element                             |
| `padding-right-auto`      | Applies `padding-right: auto;` to element                           |
| `padding-bottom-auto`     | Applies `padding-bottom: auto;` to element                          |
| `padding-left-auto`       | Applies `padding-left: auto;` to element                            |

## Padding Vertical

| Class                  | Description                                                                                 |
| ---------------------- | ------------------------------------------------------------------------------------------- |
| `padding-vertical-xxl` | Applies `padding-top: var(--space-xxl);` and `padding-bottom: var(--space-xxl);` to element |
| `padding-vertical-xl`  | Applies `padding-top: var(--space-xl);` and `padding-bottom: var(--space-xl);` to element   |
| `padding-vertical-l`   | Applies `padding-top: var(--space-l);` and `padding-bottom: var(--space-l);` to element     |
| `padding-vertical-m`   | Applies `padding-top: var(--space-m);` and `padding-bottom: var(--space-m);` to element     |
| `padding-vertical-s`   | Applies `padding-top: var(--space-s);` and `padding-bottom: var(--space-s);` to element     |
| `padding-vertical-xs`  | Applies `padding-top: var(--space-xs);` and `padding-bottom: var(--space-xs);` to element   |
| `padding-vertical-xxs` | Applies `padding-top: var(--space-xxs);` and `padding-bottom: var(--space-xxs);` to element |

## Padding Horizontal

| Class                    | Description                                                                                 |
| ------------------------ | ------------------------------------------------------------------------------------------- |
| `padding-horizontal-xxl` | Applies `padding-left: var(--space-xxl);` and `padding-right: var(--space-xxl);` to element |
| `padding-horizontal-xl`  | Applies `padding-left: var(--space-xl);` and `padding-right: var(--space-xl);` to element   |
| `padding-horizontal-l`   | Applies `padding-left: var(--space-l);` and `padding-right: var(--space-l);` to element     |
| `padding-horizontal-m`   | Applies `padding-left: var(--space-m);` and `padding-right: var(--space-m);` to element     |
| `padding-horizontal-s`   | Applies `padding-left: var(--space-s);` and `padding-right: var(--space-s);` to element     |
| `padding-horizontal-xs`  | Applies `padding-left: var(--space-xs);` and `padding-right: var(--space-xs);` to element   |
| `padding-horizontal-xxs` | Applies `padding-left: var(--space-xxs);` and `padding-right: var(--space-xxs);` to element |

## Padding Top

| Class             | Description                                         |
| ----------------- | --------------------------------------------------- |
| `padding-top-xxl` | Applies `padding-top: var(--space-xxl);` to element |
| `padding-top-xl`  | Applies `padding-top: var(--space-xl);` to element  |
| `padding-top-l`   | Applies `padding-top: var(--space-l);` to element   |
| `padding-top-m`   | Applies `padding-top: var(--space-m);` to element   |
| `padding-top-s`   | Applies `padding-top: var(--space-s);` to element   |
| `padding-top-xs`  | Applies `padding-top: var(--space-xs);` to element  |
| `padding-top-xxs` | Applies `padding-top: var(--space-xxs);` to element |

## Padding Right

| Class               | Description                                           |
| ------------------- | ----------------------------------------------------- |
| `padding-right-xxl` | Applies `padding-right: var(--space-xxl);` to element |
| `padding-right-xl`  | Applies `padding-right: var(--space-xl);` to element  |
| `padding-right-l`   | Applies `padding-right: var(--space-l);` to element   |
| `padding-right-m`   | Applies `padding-right: var(--space-m);` to element   |
| `padding-right-s`   | Applies `padding-right: var(--space-s);` to element   |
| `padding-right-xs`  | Applies `padding-right: var(--space-xs);` to element  |
| `padding-right-xxs` | Applies `padding-right: var(--space-xxs);` to element |

## Padding Bottom

| Class                | Description                                            |
| -------------------- | ------------------------------------------------------ |
| `padding-bottom-xxl` | Applies `padding-bottom: var(--space-xxl);` to element |
| `padding-bottom-xl`  | Applies `padding-bottom: var(--space-xl);` to element  |
| `padding-bottom-l`   | Applies `padding-bottom: var(--space-l);` to element   |
| `padding-bottom-m`   | Applies `padding-bottom: var(--space-m);` to element   |
| `padding-bottom-s`   | Applies `padding-bottom: var(--space-s);` to element   |
| `padding-bottom-xs`  | Applies `padding-bottom: var(--space-xs);` to element  |
| `padding-bottom-xxs` | Applies `padding-bottom: var(--space-xxs);` to element |

## Padding Left

| Class              | Description                                          |
| ------------------ | ---------------------------------------------------- |
| `padding-left-xxl` | Applies `padding-left: var(--space-xxl);` to element |
| `padding-left-xl`  | Applies `padding-left: var(--space-xl);` to element  |
| `padding-left-l`   | Applies `padding-left: var(--space-l);` to element   |
| `padding-left-m`   | Applies `padding-left: var(--space-m);` to element   |
| `padding-left-s`   | Applies `padding-left: var(--space-s);` to element   |
| `padding-left-xs`  | Applies `padding-left: var(--space-xs);` to element  |
| `padding-left-xxs` | Applies `padding-left: var(--space-xxs);` to element |