Skip to main content

​
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

All spacing utilities follow a consistent 4px scale for predictable layouts.

Spacing Scale

00pxNo spacing
14pxFine adjustments
28pxSmall spacing
312pxMedium spacing
416pxStandard spacing
624pxLarge spacing
832pxExtra large spacing
1248pxSection spacing

​
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-1, .m-2, .m-3, .m-4, .m-6, .m-8, .m-12, .m-auto
  • Vertical: .mt-*, .mb-* (0, 1, 2, 3, 4, 6, 8, 12)
  • Horizontal: .ml-auto, .mr-auto
  • Fluid: .m-fluid-*, .mt-fluid-*, .mb-fluid-* (1, 2, 3, 4, 6, 8, 12)

​
Padding Utilities

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

​
Gap Utilities

  • Static: .gap-1 through .gap-24 (4px to 96px)
  • Fluid: .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 (1, 2, 3, 4, 6, 8, 12) for consistency.
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

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

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