Docs / Margin

Margin

vel-src: spacing.css

Utilities for controlling an element's margin.

ClassProperties
vel-m-0margin: 0px
vel-m-automargin: auto
vel-m-1margin: 0.25rem
vel-m-2margin: 0.5rem
vel-m-3margin: 0.75rem
vel-m-4margin: 1rem
vel-m-6margin: 1.5rem
vel-m-8margin: 2rem
vel-mx-automargin-left: auto; margin-right: auto
vel-mx-4margin-left: 1rem; margin-right: 1rem
vel-my-4margin-top: 1rem; margin-bottom: 1rem
vel-mt-4margin-top: 1rem
vel-mr-4margin-right: 1rem
vel-mb-4margin-bottom: 1rem
vel-ml-4margin-left: 1rem

Examples

Margin scale

vel-m-2
vel-m-6
example.html
<div style="background:#1a2236;border-radius:8px;padding:4px">
  <div class="vel-m-2 vel-bg-primary vel-text-white vel-rounded-md" style="padding:8px 16px;font-size:13px">vel-m-2</div>
  <div class="vel-m-6 vel-bg-success vel-text-white vel-rounded-md" style="padding:8px 16px;font-size:13px">vel-m-6</div>
</div>

Auto centering

vel-mx-auto (centered)
example.html
<div style="background:#1a2236;border-radius:8px;padding:8px">
  <div class="vel-mx-auto vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px;width:fit-content;font-size:13px">vel-mx-auto (centered)</div>
</div>