Spacings

Spacing utilities are a set of responsive margin and padding utility classes to control an element’s spacing. They follow a consistent naming convention for intuitive use. 📏

Naming Convention

The classes are named using a logical format: ro-u-{property}{direction}-{size}

• Property: m for margin or p for padding.
• Direction:
  • t - top (margin-top or padding-top)
  • b - bottom (margin-bottom or padding-bottom)
  • l - left (margin-left or padding-left)
  • r - right (margin-right or padding-right)
  • x - horizontal axis (-inline)
  • y - vertical axis (-block)
• Size: A numeric scale from 0 to 14, a semantic size (xs-4xl), or 1/2. Margins also support negative sizes by prefixing the size with n (e.g., n4, n-xs).

---

Margin

Margin on All Sides (m)

Set margin on all four sides of an element.

<div class="ro-u-m-lg"></div>

Preview

ro-u-m-lg

Axis Margin (mx, my)

Set horizontal (mx) or vertical (my) margins.

<div class="ro-u-my-xl ro-u-mx-4"></div>

Preview

ro-u-my-xl ro-u-mx-4

Directional Margin (mt, mr, mb, ml)

Set margin on a single side.

<div class="ro-u-mt-sm ro-u-ml-xl"></div>

Preview

ro-u-mt-sm ro-u-ml-xl

---

Padding

Padding on All Sides (p)

Set padding on all four sides of an element.

<div class="ro-u-p-lg">...</div>

Preview

ro-u-p-lg

Axis Padding (px, py)

Set horizontal (px) or vertical (py) padding.

<div class="ro-u-py-xl ro-u-px-4">...</div>

Preview

ro-u-py-xl ro-u-px-4

Directional Padding (pt, pr, pb, pl)

Set padding on a single side.

<div class="ro-u-pt-sm ro-u-pl-xl">...</div>

Preview

ro-u-pt-sm ro-u-pl-xl

---

Reference Tables

Margin

Prefix	CSS Property	Available Sizes
m	margin	0-14, Semantic (xs-4xl), 1/2, auto, and Negative versions of each.
mt	margin-top	”
mb	margin-bottom	”
ml	margin-left	”
mr	margin-right	”
mx	margin-inline	”
my	margin-block	”

Padding

Prefix	CSS Property	Available Sizes
p	padding	0-14, Semantic (xs-4xl), and 1/2.
pt	padding-top	”
pb	padding-bottom	”
pl	padding-left	”
pr	padding-right	”
px	padding-inline	”
py	padding-block	”