React UI
Edit page
Home
Getting Started
Customize
Foundation
Breakpoints Colors Typography Icons Spacing
Components: UI
Components: Layouts
CSS Helpers
Readme

# Spacing

With only few reasonable exceptions, all margins and paddings in React UI use predefined spacing values. Using only the values from the spacing scale will help you keep your UI consistent.

Spacing name | Value | Usage in CSS | Usage in SCSS | Usage in HTML/JSX*
--- | --- | --- | --- | ---
0 | 0 | `--rui-spacing-0` | `spacing(0)` | `class="mt-0"`
1 | 0.25 rem | `--rui-spacing-1` | `spacing(1)` | `class="mt-1"`
2 | 0.5 rem | `--rui-spacing-2` | `spacing(2)` | `class="mt-2`
3 | 0.75 rem | `--rui-spacing-3` | `spacing(3)` | `class="mt-3`
4 | 1 rem | `--rui-spacing-4` | `spacing(4)` | `class="mt-4"`
5 | 1.5 rem | `--rui-spacing-5` | `spacing(5)` | `class="mt-5`
6 | 2 rem | `--rui-spacing-6` | `spacing(6)` | `class="mt-6`
7 | 3 rem | `--rui-spacing-7` | `spacing(7)` | `class="mt-7"`

* For the sake of brevity, usage in HTML only illustrates the top margin property. See
Spacing helpers for the full list of options.

Next: Alert →