Spacing

Margin, padding, and gap utilities with consistent 4px scale

Overview

Control spacing around and inside elements using our spacing utilities. All spacing utilities follow a consistent 4px scale for predictable, maintainable layouts. Choose between static utilities for precise control or fluid utilities that scale smoothly across viewport sizes.

Margin

Control external spacing with .m-*, .mt-*, .mb-*, and fluid variants

Padding

Control internal spacing with .p-*, .px-*, .py-*, and fluid variants

Gap

Control spacing between flex items with .gap-* and fluid variants

Spacing Scale

The spacing scale is the foundation of all spacing utilities in the framework. All margin, padding, and gap utilities follow this consistent 4px-based scale for predictable, maintainable layouts.

Core Scale Values

Scale	Size	Usage
0	0px	No spacing
px	1px	Pixel-perfect adjustments
1	4px	Fine adjustments
2	8px	Small spacing
3	12px	Medium spacing
4	16px	Standard spacing
6	24px	Large spacing
8	32px	Extra large spacing
12	48px	Section spacing

Extended Scale (Gap Only)

Gap utilities extend beyond the core scale for larger spacing needs:

Scale	Size	Usage
10	40px	Extra large gap
14	56px	Large section gap
16	64px	Extra large section gap
18	72px	Very large gap
20	80px	Huge gap
22	88px	Extra huge gap
24	96px	Maximum gap

Why This Scale?

• 4px base unit: Provides fine-grained control while maintaining visual consistency
• 1px option: Allows pixel-perfect adjustments when needed
• Multiplicative progression: Each step multiplies the base (1×, 2×, 3×, 4×, 6×, 8×, 12×)
• Predictable relationships: Easy to remember and apply consistently
• Responsive ready: Works seamlessly with fluid variants that scale between breakpoints

This spacing scale is used across all spacing utilities (margin, padding, and gap). When working with spacing, always refer to this scale to maintain consistency across your design.

Quick Start

Basic Spacing

<!-- Margin -->
<div class="m-4 p-4 bg-blue text-white">Standard margin and padding</div>
<div class="mt-6 mb-4 p-4 bg-green text-white">Top and bottom margins</div>

<!-- Padding -->
<div class="p-4 bg-gray-light">Standard padding</div>
<div class="px-6 py-4 bg-white">Horizontal and vertical padding</div>

<!-- Gap -->
<div class="flex gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-green text-white">Item 2</div>
  <div class="p-4 bg-red text-white">Item 3</div>
</div>

Fluid Spacing

<!-- Hero section with fluid spacing -->
<section class="py-fluid-12 px-fluid-6">
  <h1 class="text-fluid-6xl font-bold mb-fluid-4">Hero Title</h1>
  <p class="text-fluid-lg mb-fluid-8">Supporting text</p>
</section>

<!-- Card grid with fluid gap -->
<div class="flex flex-wrap gap-fluid-6">
  <div class="w-1-3">
    <div class="card p-fluid-6">Card 1</div>
  </div>
  <div class="w-1-3">
    <div class="card p-fluid-6">Card 2</div>
  </div>
</div>

Spacing Utilities Reference

Margin Utilities

• All sides: .m-0, .m-px, .m-1, .m-2, .m-3, .m-4, .m-6, .m-8, .m-12, .m-auto
• Vertical: .my-*, .mt-*, .mb-* (0, px, 1, 2, 3, 4, 6, 8, 12, auto)
• Horizontal: .mx-*, .ml-*, .mr-* (0, px, 1, 2, 3, 4, 6, 8, 12, auto)
• Negative: .-m-*, .-mx-*, .-my-*, .-mt-*, .-mb-*, .-ml-*, .-mr-* (px, 1, 2, 3, 4, 6, 8, 12)
• Fluid: .m-fluid-*, .mt-fluid-*, .mb-fluid-* (1, 2, 3, 4, 6, 8, 12)

Padding Utilities

• All sides: .p-0, .p-px, .p-1, .p-2, .p-3, .p-4, .p-6, .p-8, .p-12
• Vertical: .py-*, .pt-*, .pb-* (0, px, 1, 2, 3, 4, 6, 8)
• Horizontal: .px-* (px, 2, 3, 4, 6, 8)
• Negative: .-p-*, .-pt-*, .-pb-*, .-px-*, .-py-* (px, 1, 2, 3, 4, 6, 8, 12)
• Fluid: .p-fluid-*, .pt-fluid-*, .pb-fluid-*, .px-fluid-*, .py-fluid-*

Gap Utilities

• Static: .gap-px, .gap-1 through .gap-24 (1px to 96px)
• Fluid: .gap-fluid-px, .gap-fluid-1 through .gap-fluid-24 (scales from mobile to desktop)

Fluid spacing utilities use CSS clamp() to scale smoothly between mobile and desktop viewport sizes, providing responsive spacing without media queries.

Common Spacing Patterns

Card Layout

<div class="card p-6 mb-4">
<h3 class="text-xl font-semibold mb-4">Card Title</h3>
  <p class="text-gray mb-4">Card description with consistent spacing.</p>
  <button class="btn btn-blue">Action</button>
</div>

Form Layout

<form class="max-w-md">
  <div class="mb-4">
    <label class="text-sm font-medium mb-2">Email</label>
    <input type="email" class="w-full p-3 border border-gray rounded">
  </div>
  <div class="mb-6">
    <label class="text-sm font-medium mb-2">Password</label>
    <input type="password" class="w-full p-3 border border-gray rounded">
  </div>
  <button class="btn btn-blue w-full">Submit</button>
</form>

Section Layout

<section class="py-12">
  <div class="cont">
  <h2 class="text-3xl font-bold text-center mb-6">Section Title</h2>
    <p class="text-lg text-center text-gray mb-8">Section description</p>
    <div class="flex gap-6">
      <div class="w-1-3 p-6 bg-white rounded-lg">Content 1</div>
      <div class="w-1-3 p-6 bg-white rounded-lg">Content 2</div>
      <div class="w-1-3 p-6 bg-white rounded-lg">Content 3</div>
    </div>
  </div>
</section>

Best Practices

1. Use the 4px Scale

   Always use the predefined spacing scale (px, 1, 2, 3, 4, 6, 8, 12) for consistency. This ensures predictable layouts and easier maintenance.

2. Maintain Vertical Rhythm

   Use consistent spacing between related elements for better visual flow.

3. Group Related Elements

   Use smaller gaps within groups and larger gaps between groups.

4. Use Gap for Flex Items

   Use gap utilities instead of margin for spacing between flex items.

5. Consider Responsive Design

   Use fluid spacing utilities for content that needs to scale smoothly across breakpoints.

Spacing Hierarchy

1. Micro spacing (1-2): Fine adjustments, icon spacing
2. Small spacing (3-4): Element internal spacing, form fields
3. Medium spacing (6): Section internal spacing, card padding
4. Large spacing (8-12): Section spacing, major layout divisions

Related Utilities

Layout

Flexbox and display utilities for layout

Sizing

Width and height utilities for spacing

Typography

Line height and text spacing utilities

Components

Pre-built components with proper spacing