SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

📏 Spacing

📐 What are spacing utilities used for?

Spacing utilities control margin, padding, and gaps using a shared spacing scale. They let you quickly adjust outer spacing (margin), inner spacing (padding), and the gap between flex/grid items using a consistent set of values and responsive breakpoints.

All utilities are generated from the $spacings map and the global $breakpoints configuration. Margins support the auto value, paddings do not, and gap helpers only accept numeric spacing values.

📏 Spacing Utilities Reference

All spacing utilities use the following scale:
Value: 0, half, 1, 2, 3, 4, 5, auto
Breakpoint: xs, sm, md, lg, xl, xxl,

.gap-{value}

Sets the gap between child elements (for flex or grid containers) using the spacing scale.
The value auto is not supported for this utility.

.m-{value}

Applies margin on all sides using the spacing scale, including auto (useful for centering blocks).

.m-{value}-{breakpoint}

Applies margin on all sides from a specific breakpoint, using any defined value (including auto).

.mt-{value}

Applies margin to the top side using the spacing scale, including auto.

.mt-{value}-{breakpoint}

Applies top margin from a specific breakpoint, using any defined value (including auto).

.mb-{value}

Applies margin to the bottom side using the spacing scale, including auto.

.mb-{value}-{breakpoint}

Applies bottom margin from a specific breakpoint, using any defined value (including auto).

.ml-{value}

Applies margin to the left side using the spacing scale, including auto.

.ml-{value}-{breakpoint}

Applies left margin from a specific breakpoint, using any defined value (including auto).

.ms-{value}

Applies margin on the logical start side (left in LTR, right in RTL), including auto.

.ms-{value}-{breakpoint}

Applies logical start margin from a specific breakpoint, using any defined value (including auto).

.mr-{value}

Applies margin to the right side using the spacing scale, including auto.

.mr-{value}-{breakpoint}

Applies right margin from a specific breakpoint, using any defined value (including auto).

.me-{value}

Applies margin on the logical end side (right in LTR, left in RTL), including auto.

.me-{value}-{breakpoint}

Applies logical end margin from a specific breakpoint, using any defined value (including auto).

.mx-{value}

Applies horizontal margins (left and right) using the spacing scale, including auto.

.mx-{value}-{breakpoint}

Applies horizontal margins from a specific breakpoint, using any defined value (including auto).

.my-{value}

Applies vertical margins (top and bottom) using the spacing scale, including auto.

.my-{value}-{breakpoint}

Applies vertical margins from a specific breakpoint, using any defined value (including auto).

.p-{value}

Applies padding on all sides using the spacing scale.
The value auto is not supported for this utility.

.p-{value}-{breakpoint}

Applies padding on all sides from a specific breakpoint.
The value auto is not supported for this utility.

.pt-{value}

Applies padding to the top side using the spacing scale.
The value auto is not supported for this utility.

.pt-{value}-{breakpoint}

Applies top padding from a specific breakpoint.
The value auto is not supported for this utility.

.pb-{value}

Applies padding to the bottom side using the spacing scale.
The value auto is not supported for this utility.

.pb-{value}-{breakpoint}

Applies bottom padding from a specific breakpoint.
The value auto is not supported for this utility.

.pl-{value}

Applies padding to the left side using the spacing scale.
The value auto is not supported for this utility.

.pl-{value}-{breakpoint}

Applies left padding from a specific breakpoint.
The value auto is not supported for this utility.

.ps-{value}

Applies padding on the logical start side (left in LTR, right in RTL).
The value auto is not supported for this utility.

.ps-{value}-{breakpoint}

Applies logical start padding from a specific breakpoint.
The value auto is not supported for this utility.

.pr-{value}

Applies padding to the right side using the spacing scale.
The value auto is not supported for this utility.

.pr-{value}-{breakpoint}

Applies right padding from a specific breakpoint.
The value auto is not supported for this utility.

.pe-{value}

Applies padding on the logical end side (right in LTR, left in RTL).
The value auto is not supported for this utility.

.pe-{value}-{breakpoint}

Applies logical end padding from a specific breakpoint.
The value auto is not supported for this utility.

.px-{value}

Applies horizontal padding (left and right) using the spacing scale.
The value auto is not supported for this utility.

.px-{value}-{breakpoint}

Applies horizontal padding from a specific breakpoint.
The value auto is not supported for this utility.

.py-{value}

Applies vertical padding (top and bottom) using the spacing scale.
The value auto is not supported for this utility.

.py-{value}-{breakpoint}

Applies vertical padding from a specific breakpoint.
The value auto is not supported for this utility.