Spacing 1.2.2

Margin, padding, and gap utilities map to --velin-space-* tokens. Responsive variants use .velin-{bp}-p-* / m-* / gap-* in responsive.css. Deutsch: Abst?nde

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Space stacks and sections with token steps (2 / 3 / 4 / 6 / 8), not arbitrary rem.
Prefer logical axes: .velin-pi-* (inline), .velin-pb-* / .velin-py-* (padding-block), .velin-mbs-* / .velin-mbe-*.
Use .velin-gap-* on flex/grid parents instead of child margins when possible.

When not

Do not read .velin-pb-* / .velin-py-* as padding-bottom — both set padding-block (ADR 0017). Steps include 10 and 12 for section rhythm.
.velin-mb-* is margin-bottom only; use .velin-my-* for block-axis margin.
Negative-margin utilities and a full Utility Engine scale are not shipped — planned with the generator.

Honesty: Class step numbers match token keys (.velin-p-4 → --velin-space-4 = 1rem), not a Bootstrap 0–5 rem table.

Token scale (excerpt)

Token	Value	Common classes
`--velin-space-0`	`0`	`.velin-m-0`, `.velin-p-0`, `.velin-gap-0`
`--velin-space-1`	`0.25rem`	`.velin-m-1`, `.velin-p-1`, `.velin-gap-1`
`--velin-space-2`	`0.5rem`	`.velin-m-2`, `.velin-p-2`, `.velin-gap-2`
`--velin-space-3`	`0.75rem`	`.velin-m-3`, `.velin-p-3`, `.velin-gap-3`
`--velin-space-4`	`1rem`	`.velin-m-4`, `.velin-p-4`, `.velin-gap-4`
`--velin-space-6`	`1.5rem`	`.velin-m-6`, `.velin-p-6`, `.velin-gap-6`
`--velin-space-8`	`2rem`	`.velin-m-8`, `.velin-p-8`, `.velin-gap-8`

Full scale (including 0-5, 1-5, 10, 12, …) is in src/tokens/spacing.css. Not every token has a utility class yet — that expansion is Utility Engine territory.

Notation

Base: .velin-{m|p|gap|mi|my|mb|mbs|mbe|pi|pb}-{size}
Responsive: .velin-{sm|md|lg|xl}-{p|m|gap|…}-{size} (subset in responsive.css)
Auto: .velin-m-auto, .velin-mi-auto

Margin

<div class="velin-m-4">Margin all sides (space-4)</div>
<div class="velin-mbs-4">Margin block-start</div>
<div class="velin-mb-4">Margin-bottom only</div>
<div class="velin-my-4">Margin block-axis (top + bottom)</div>
<div class="velin-mi-auto">Centered on the inline axis</div>

Margin all sides (space-4)

Margin block-start

Margin-bottom only

Margin block-axis (top + bottom)

Centered on the inline axis

Padding

<div class="velin-p-4">Padding all sides</div>
<div class="velin-pb-6">Padding-block (not padding-bottom)</div>
<div class="velin-pi-4">Padding-inline</div>
<div class="velin-p-4 velin-md-p-8">Responsive padding</div>

Padding all sides

Padding-block (not padding-bottom)

Padding-inline

Responsive padding

Gap

<div class="velin-flex velin-gap-3">…</div>
<div class="velin-grid velin-gap-4">…</div>
<div class="velin-flex velin-md-gap-6">…</div>

…