React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CSS Helpers
Animation Box Alignment Colors Display Spacing
Naming System Examples Typography
Readme

# Spacing

Responsive spacing helper classes enable to simply add or modify
`margin` and `padding` properties where necessary.

##
Naming System

The classes are named using the format `[property][sides]-[size]` for `xs` and `[property][sides]-[breakpoint]-[size]` for `sm`, `md`, `lg`, `xl`, `xxl`, and `xxxl`
breakpoints.

Where `property` is one of:

- `m` - for classes that set `margin`
- `p` - for classes that set `padding`

Where `sides` is one of:

- `t` - for classes that set `margin-top` or `padding-top`
- `b` - for classes that set `margin-bottom` or `padding-bottom`
- `l` - for classes that set `margin-left` or `padding-left`
- `r` - for classes that set `margin-right` or `padding-right`

Where `size` is one of:

- `0`
- `1`
- `2`
- `3`
- `4`
- `5`
- `6`
- `7`
- `auto` for classes that set the `margin` to `auto`

👉 Check the spacing scale to see the exact values of individual sizes.

## Examples

Example of the `margin-bottom` property applied for all viewport sizes:

`.mb-0`
`.mb-1`
`.mb-2`
`.mb-3`
`.mb-4`
`.mb-5`
`.mb-6`
`.mb-7`
<div> <div className="mb-0"> <Placeholder bordered> <code>.mb-0</code> </Placeholder> </div> <div className="mb-1"> <Placeholder bordered> <code>.mb-1</code> </Placeholder> </div> <div className="mb-2"> <Placeholder bordered> <code>.mb-2</code> </Placeholder> </div> <div className="mb-3"> <Placeholder bordered> <code>.mb-3</code> </Placeholder> </div> <div className="mb-4"> <Placeholder bordered> <code>.mb-4</code> </Placeholder> </div> <div className="mb-5"> <Placeholder bordered> <code>.mb-5</code> </Placeholder> </div> <div className="mb-6"> <Placeholder bordered> <code>.mb-6</code> </Placeholder> </div> <div className="mb-7"> <Placeholder bordered> <code>.mb-7</code> </Placeholder> </div> </div>

    <div>  <div className="mb-0">    <Placeholder bordered>      <code>.mb-0</code>    </Placeholder>  </div>  <div className="mb-1">    <Placeholder bordered>      <code>.mb-1</code>    </Placeholder>  </div>  <div className="mb-2">    <Placeholder bordered>      <code>.mb-2</code>    </Placeholder>  </div>  <div className="mb-3">    <Placeholder bordered>      <code>.mb-3</code>    </Placeholder>  </div>  <div className="mb-4">    <Placeholder bordered>      <code>.mb-4</code>    </Placeholder>  </div>  <div className="mb-5">    <Placeholder bordered>      <code>.mb-5</code>    </Placeholder>  </div>  <div className="mb-6">    <Placeholder bordered>      <code>.mb-6</code>    </Placeholder>  </div>  <div className="mb-7">    <Placeholder bordered>      <code>.mb-7</code>    </Placeholder>  </div></div>

Example of the `padding-left` property applied from `sm` breakpoint up:

`.pl-sm-0`
`.pl-sm-1`
`.pl-sm-2`
`.pl-sm-3`
`.pl-sm-4`
`.pl-sm-5`
`.pl-sm-6`
`.pl-sm-7`
<div> <div className="pl-sm-0"> <Placeholder bordered> <code>.pl-sm-0</code> </Placeholder> </div> <div className="pl-sm-1"> <Placeholder bordered> <code>.pl-sm-1</code> </Placeholder> </div> <div className="pl-sm-2"> <Placeholder bordered> <code>.pl-sm-2</code> </Placeholder> </div> <div className="pl-sm-3"> <Placeholder bordered> <code>.pl-sm-3</code> </Placeholder> </div> <div className="pl-sm-4"> <Placeholder bordered> <code>.pl-sm-4</code> </Placeholder> </div> <div className="pl-sm-5"> <Placeholder bordered> <code>.pl-sm-5</code> </Placeholder> </div> <div className="pl-sm-6"> <Placeholder bordered> <code>.pl-sm-6</code> </Placeholder> </div> <div className="pl-sm-7"> <Placeholder bordered> <code>.pl-sm-7</code> </Placeholder> </div> </div>

    <div>  <div className="pl-sm-0">    <Placeholder bordered>      <code>.pl-sm-0</code>    </Placeholder>  </div>  <div className="pl-sm-1">    <Placeholder bordered>      <code>.pl-sm-1</code>    </Placeholder>  </div>  <div className="pl-sm-2">    <Placeholder bordered>      <code>.pl-sm-2</code>    </Placeholder>  </div>  <div className="pl-sm-3">    <Placeholder bordered>      <code>.pl-sm-3</code>    </Placeholder>  </div>  <div className="pl-sm-4">    <Placeholder bordered>      <code>.pl-sm-4</code>    </Placeholder>  </div>  <div className="pl-sm-5">    <Placeholder bordered>      <code>.pl-sm-5</code>    </Placeholder>  </div>  <div className="pl-sm-6">    <Placeholder bordered>      <code>.pl-sm-6</code>    </Placeholder>  </div>  <div className="pl-sm-7">    <Placeholder bordered>      <code>.pl-sm-7</code>    </Placeholder>  </div></div>

Next: Typography →