Docs / Padding

Padding

vel-src: spacing.css

Utilities for controlling an element's padding.

ClassProperties
vel-p-0padding: 0px
vel-p-1padding: 0.25rem
vel-p-2padding: 0.5rem
vel-p-3padding: 0.75rem
vel-p-4padding: 1rem
vel-p-5padding: 1.25rem
vel-p-6padding: 1.5rem
vel-p-8padding: 2rem
vel-p-10padding: 2.5rem
vel-p-12padding: 3rem
vel-p-16padding: 4rem
vel-px-4padding-left: 1rem; padding-right: 1rem
vel-py-4padding-top: 1rem; padding-bottom: 1rem
vel-pt-4padding-top: 1rem
vel-pr-4padding-right: 1rem
vel-pb-4padding-bottom: 1rem
vel-pl-4padding-left: 1rem

Examples

Padding scale

p-2
p-4
p-8
example.html
<div class="vel-flex vel-items-end vel-gap-4">
  <div class="vel-p-2" style="background:#7c5cfc20;border:1px dashed #7c5cfc60;border-radius:6px">
    <div style="background:#7c5cfc;color:#fff;border-radius:4px;font-size:12px">p-2</div>
  </div>
  <div class="vel-p-4" style="background:#7c5cfc20;border:1px dashed #7c5cfc60;border-radius:6px">
    <div style="background:#7c5cfc;color:#fff;border-radius:4px;font-size:12px">p-4</div>
  </div>
  <div class="vel-p-8" style="background:#7c5cfc20;border:1px dashed #7c5cfc60;border-radius:6px">
    <div style="background:#7c5cfc;color:#fff;border-radius:4px;font-size:12px">p-8</div>
  </div>
</div>

Directional padding

pt-8 pb-2 px-4
py-6 px-2
example.html
<div class="vel-flex vel-gap-4">
  <div class="vel-pt-8 vel-pb-2 vel-px-4" style="background:#0ecb8120;border:1px dashed #0ecb8160;border-radius:6px">
    <div style="background:#0ecb81;color:#fff;border-radius:4px;font-size:12px;padding:4px 8px">pt-8 pb-2 px-4</div>
  </div>
  <div class="vel-py-6 vel-px-2" style="background:#2ebde520;border:1px dashed #2ebde560;border-radius:6px">
    <div style="background:#2ebde5;color:#fff;border-radius:4px;font-size:12px;padding:4px 8px">py-6 px-2</div>
  </div>
</div>