Spacing

Margin and padding utilities on a numeric rem scale. Sides use CSS logical properties (inline-start / inline-end / block-start / block-end) so right-to-left layouts flip automatically.

How it works

Two property letters: m (margin) and p (padding).
Eight side letters, each mapping to one or two logical properties:
- m- / p- — all four sides (shorthand)
- mt- / pt- — block-start (top in LTR)
- mb- / pb- — block-end (bottom in LTR)
- ms- / ps- — inline-start (left in LTR, right in RTL)
- me- / pe- — inline-end (right in LTR, left in RTL)
- mx- / px- — inline-start + inline-end (horizontal)
- my- / py- — block-start + block-end (vertical)
Seven scale values: 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.5rem), 6 (3rem), plus auto.
auto is only emitted for margin classes (padding: auto is invalid CSS), so .m-auto, .mt-auto, .mx-auto etc. exist but .p-auto does not.
Total emitted: 7 sizes × 7 prefixes × 2 properties + 1 auto column on margin only = 112 classes.
All classes use !important: spacing helpers are escape hatches whose explicit job is to override any component-level margin or padding rule.

Live

Padding shorthand (.p-0 through .p-6)

Live

.p-0 .p-1 .p-2 .p-3 .p-4 .p-5 .p-6

HTML

<div style="display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap;">
<span class="p-0" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-0</span>
<span class="p-1" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-1</span>
<span class="p-2" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-2</span>
<span class="p-3" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-3</span>
<span class="p-4" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-4</span>
<span class="p-5" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-5</span>
<span class="p-6" style="background: var(--kc-primary-bg); color: var(--kc-primary-fg);">.p-6</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-spacing')
);

Playground

Axis modifiers (mx / my, px / py)

Live

.px-5 .py-2

.mx-auto

HTML

<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<div style="background: var(--kc-default-bg); border: 1px dashed currentColor;">
  <span class="px-5 py-2" style="background: var(--kc-success-bg); color: var(--kc-success-fg); display: inline-block;">.px-5 .py-2</span>
</div>
<div style="background: var(--kc-default-bg); border: 1px dashed currentColor;">
  <span class="mx-auto px-3 py-2" style="background: var(--kc-warning-bg); color: var(--kc-warning-fg); display: block; width: 8rem; text-align: center;">.mx-auto</span>
</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-spacing')
);

Playground

Logical sides (ms / me — flip in RTL)

Live

.ms-4 .me-2

HTML

<div style="background: var(--kc-default-bg); border: 1px dashed currentColor;">
<span class="ms-4 me-2 py-2 px-3" style="background: var(--kc-danger-bg); color: var(--kc-danger-fg); display: inline-block;">.ms-4 .me-2</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-spacing')
);

Playground

Markup

<!-- Equal padding all sides, step 4 (1rem) -->
<div class="p-4">…</div>

<!-- Inline-start margin only — RTL-flips automatically -->
<div class="ms-3">…</div>

<!-- Horizontal padding step 2, vertical padding step 5 -->
<div class="px-2 py-5">…</div>

<!-- Centre with auto margins -->
<div class="mx-auto">…</div>

<!-- Reset margin everywhere -->
<div class="m-0">…</div>

Scale reference

Key	Value
`0`	`0`
`1`	`0.25rem`
`2`	`0.5rem`
`3`	`0.75rem`
`4`	`1rem`
`5`	`1.5rem`
`6`	`3rem`
`auto`	`auto` (margin only)

Side reference

Letter	Logical property	LTR equivalent
(none)	`margin` / `padding`	all sides
`t`	`-block-start`	top
`b`	`-block-end`	bottom
`s`	`-inline-start`	left
`e`	`-inline-end`	right
`x`	`-inline-start` + `-inline-end`	left + right
`y`	`-block-start` + `-block-end`	top + bottom

Variables

Variable	Default	Notes
`$selector-prefix-m`	`'.m-'`	Prefix for margin shorthand. Override to rescope all margin classes (e.g. `'.is-m-'`).
`$selector-prefix-p`	`'.p-'`	Prefix for padding shorthand.
`$selector-prefix-mt` … `$selector-prefix-my`	`'.mt-'`, `'.mb-'`, `'.ms-'`, `'.me-'`, `'.mx-'`, `'.my-'`	Per-side margin prefixes (block-start, block-end, inline-start, inline-end, axis-x, axis-y).
`$selector-prefix-pt` … `$selector-prefix-py`	`'.pt-'`, `'.pb-'`, `'.ps-'`, `'.pe-'`, `'.px-'`, `'.py-'`	Per-side padding prefixes.
`$scale`	`(0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.5rem, 6: 3rem, auto: auto)`	Map of suffix key to CSS length. Add or remove keys to extend / shrink the emitted matrix.
`$properties`	`(m: margin, p: padding)`	Map of class-letter prefix to CSS property. Override to ship only margin or only padding.
`$sides`	6 entries (t, b, s, e, x, y) mapping to logical CSS properties	Override to retire an axis (e.g. drop `s`/`e` if your codebase never targets logical inline edges).
`$auto-allowed`	`(m)`	Property letters that accept the `auto` value. Padding is excluded because `padding: auto` is invalid CSS.

Override example

@use '@adnap/krysalicss/helper/spacing' with (
  // Tighten or extend the rem scale; keys map straight into the class name:
  $scale: (
    0:    0,
    1:    0.25rem,
    2:    0.5rem,
    3:    1rem,
    4:    2rem,
    auto: auto,
  ),
  // Restrict which property letters emit (e.g. ship padding-only):
  $properties: (
    p: padding,
  ),
);

Tokens consumed

None — spacing helpers emit literal rem / auto values from $scale at compile time.