Spacing

Learn the Velyx spacing system and layout rules for building cleaner, more consistent Laravel UI screens.

Spacing

Velyx uses Tailwind CSS v4's spacing scale for consistent margins, padding, and gaps throughout your UI.

Spacing Scale

Tailwind uses a consistent spacing scale where values increment proportionally:

Scale Value Pixels Usage
0 0 0px No spacing
px 1px 1px Hairline
0.5 0.125rem 2px Tight
1 0.25rem 4px Extra tight
1.5 0.375rem 6px Very tight
2 0.5rem 8px Tight
2.5 0.625rem 10px Snug
3 0.75rem 12px Normal
3.5 0.875rem 14px Relaxed
4 1rem 16px Default
5 1.25rem 20px Loose
6 1.5rem 24px | Extra loose
7 1.75rem 28px | Very loose
8 2rem 32px | Wide
9 2.25rem 36px | Extra wide
10 2.5rem 40px | Very wide
12 3rem 48px | Ultra wide
16 4rem 64px | Huge
20 5rem 80px | Extra huge
24 6rem 96px | Massive

Padding

All Sides

<div class="p-4">Equal padding on all sides</div>

Individual Sides

<div class="px-4 py-2">Horizontal and vertical padding</div>
<div class="pt-4 pr-2 pb-4 pl-2">Individual side padding</div>
Class Description
p-{size} Padding all sides
px-{size} Padding left and right
py-{size} Padding top and bottom
pt-{size} Padding top
pr-{size} Padding right
pb-{size} Padding bottom
pl-{size} Padding left

Margin

All Sides

<div class="m-4">Equal margin on all sides</div>

Individual Sides

<div class="mx-auto my-4">Horizontal auto, vertical margin</div>
<div class="mt-4 mr-2 mb-4 ml-2">Individual side margins</div>
Class Description
m-{size} Margin all sides
mx-{size} Margin left and right
my-{size} Margin top and bottom
mt-{size} Margin top
mr-{size} Margin right
mb-{size} Margin bottom
ml-{size} Margin left
mx-auto Horizontal centering

Gap (Recommended)

Use gap utilities for spacing between flex or grid children instead of margins:

<!-- Flexbox with gap -->
<div class="flex gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Grid with gap -->
<div class="grid grid-cols-2 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
</div>

<!-- Responsive gap -->
<div class="flex gap-4 lg:gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Best Practice: Use gap utilities instead of margins for spacing between siblings. This prevents margin collapse issues and is more predictable.

Space Between

For separating elements vertically, use space-y:

<div class="space-y-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

For horizontal spacing:

<div class="flex space-x-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Common Patterns

Card Spacing

<div class="p-6 space-y-4">
    <h2>Title</h2>
    <p>Description</p>
    <button>Action</button>
</div>

Button Padding

<button class="px-4 py-2">Default Button</button>
<button class="px-3 py-1.5 text-sm">Small Button</button>
<button class="px-6 py-3 text-lg">Large Button</button>

Container Spacing

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Content with responsive horizontal padding -->
</div>

Section Spacing

<section class="py-12 lg:py-20">
    <!-- Content with vertical spacing -->
</section>

Responsive Spacing

Adjust spacing at different breakpoints:

<div class="p-4 md:p-6 lg:p-8">
    Responsive padding
</div>

<div class="gap-4 lg:gap-8">
    Responsive gap
</div>

Negative Margins

For pulling elements out of their container:

<div class="-mt-4">Negative top margin</div>
<div class="-mx-4">Negative horizontal margins</div>

Next Steps