Abstände 1.2.0

Margin-, Padding- und Gap-Utilities verweisen auf --velin-space-*-Tokens. Responsive Varianten nutzen .velin-{bp}-p-* / m-* / gap-* in responsive.css. English: Spacing

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Setze Abstände in Stacks und Abschnitten mit Token-Stufen (2 / 3 / 4 / 6 / 8), nicht mit beliebigen rem-Werten.
Bevorzuge logische Achsen: .velin-pi-* (inline), .velin-pb-* / .velin-py-* (padding-block), .velin-mbs-* / .velin-mbe-*.
Nutze nach Möglichkeit .velin-gap-* auf Flex-/Grid-Parents statt Margins auf Kindern.

Wann nicht

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-* ist nur margin-bottom; nutze .velin-my-* für Margin auf der Blockachse.
Negative-margin utilities and a full Utility Engine scale are not shipped — planned with the generator.

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

Token-Skala (Auszug)

Token	Wert	Gängige Klassen
`--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`

Die vollständige Skala (inklusive 0-5, 1-5, 10, 12, …) steht in src/tokens/spacing.css. Not every token has a utility class yet — that expansion is Utility Engine territory.

Notation

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

Margin

<div class="velin-m-4">Margin auf allen Seiten (space-4)</div>
<div class="velin-mbs-4">Margin block-start</div>
<div class="velin-mb-4">Nur Margin-bottom</div>
<div class="velin-my-4">Margin auf der Blockachse (oben + unten)</div>
<div class="velin-mi-auto">Auf der Inline-Achse zentriert</div>

Margin auf allen Seiten (space-4)

Margin block-start

Nur Margin-bottom

Margin auf der Blockachse (oben + unten)

Auf der Inline-Achse zentriert

Padding

<div class="velin-p-4">Padding auf allen Seiten</div>
<div class="velin-pb-6">Padding-block (nicht padding-bottom)</div>
<div class="velin-pi-4">Padding-inline</div>
<div class="velin-p-4 velin-md-p-8">Responsives Padding</div>

Padding auf allen Seiten

Padding-block (nicht padding-bottom)

Padding-inline

Responsives 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>

…