Spacing

Control margin, padding, and gap using a consistent spacing scale from 0 to 5, with responsive breakpoint support.

Notation

Spacing utilities follow the pattern .velin-{property}{sides}-{breakpoint}-{size}:

Property: m (margin), p (padding)
Sides: t top, b bottom, s start, e end, x horizontal, y vertical, blank = all
Size: 0, 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto (margin only)

Margin

<div class="velin-m-3">Margin all sides 1rem</div>
<div class="velin-mt-4">Margin top 1.5rem</div>
<div class="velin-mx-auto">Horizontally centered</div>
<div class="velin-ms-2 velin-me-lg-4">Responsive margin</div>

Padding

<div class="velin-p-3">Padding all sides 1rem</div>
<div class="velin-py-4">Vertical padding 1.5rem</div>
<div class="velin-px-2 velin-px-md-5">Responsive padding</div>

Gap

Use .velin-gap-* on flex or grid containers:

<div class="velin-d-flex velin-gap-3">...</div>
<div class="velin-d-grid velin-gap-2">...</div>
<div class="velin-d-flex velin-row-gap-2 velin-column-gap-4">...</div>

Negative Margins

Negative margin utilities use n prefix: .velin-mt-n1 through .velin-mt-n5.

<div class="velin-mt-n3">Negative margin top -1rem</div>