Skip to main content

​
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

​
Margin

Control element spacing with margin utilities.

​
All Sides Margin

All Sides Margin

.m-00margin: 0;No margin
.m-14pxmargin: 4px;Small margin
.m-28pxmargin: 8px;Small margin
.m-312pxmargin: 12px;Medium margin
.m-416pxmargin: 16px;Standard margin
.m-624pxmargin: 24px;Large margin
.m-832pxmargin: 32px;Extra large margin
.m-1248pxmargin: 48px;Section margin
.m-autoAutomargin: auto;Center element

​
Vertical Margin

Top Margin

.mt-00margin-top: 0;No top margin
.mt-14pxmargin-top: 4px;Small top margin
.mt-28pxmargin-top: 8px;Small top margin
.mt-312pxmargin-top: 12px;Medium top margin
.mt-416pxmargin-top: 16px;Standard top margin
.mt-624pxmargin-top: 24px;Large top margin
.mt-832pxmargin-top: 32px;Extra large top margin
.mt-1248pxmargin-top: 48px;Section top margin

Bottom Margin

.mb-00margin-bottom: 0;No bottom margin
.mb-14pxmargin-bottom: 4px;Small bottom margin
.mb-28pxmargin-bottom: 8px;Small bottom margin
.mb-312pxmargin-bottom: 12px;Medium bottom margin
.mb-416pxmargin-bottom: 16px;Standard bottom margin
.mb-624pxmargin-bottom: 24px;Large bottom margin
.mb-832pxmargin-bottom: 32px;Extra large bottom margin
.mb-1248pxmargin-bottom: 48px;Section bottom margin

​
Horizontal Margin

Horizontal Margin

.ml-autoLeft automargin-left: auto;Push element right
.mr-autoRight automargin-right: auto;Push element left

​
Examples

<!-- Margin examples -->
<div class="m-4 p-4 bg-blue text-white">Standard margin all around</div>
<div class="mt-6 mb-4 p-4 bg-green text-white">Top and bottom margins</div>
<div class="ml-auto p-4 bg-red text-white">Auto left margin (pushed right)</div>
<div class="mr-auto p-4 bg-yellow text-white">
  Auto right margin (pushed left)
</div>

​
Padding

Control internal spacing with padding utilities.

​
All Sides Padding

All Sides Padding

.p-00padding: 0;No padding
.p-14pxpadding: 4px;Small padding
.p-28pxpadding: 8px;Small padding
.p-312pxpadding: 12px;Medium padding
.p-416pxpadding: 16px;Standard padding
.p-624pxpadding: 24px;Large padding
.p-832pxpadding: 32px;Extra large padding
.p-1248pxpadding: 48px;Section padding

​
Vertical Padding

Top Padding

.pt-00padding-top: 0;No top padding
.pt-14pxpadding-top: 4px;Small top padding
.pt-28pxpadding-top: 8px;Small top padding
.pt-312pxpadding-top: 12px;Medium top padding
.pt-416pxpadding-top: 16px;Standard top padding
.pt-624pxpadding-top: 24px;Large top padding
.pt-832pxpadding-top: 32px;Extra large top padding

Bottom Padding

.pb-00padding-bottom: 0;No bottom padding
.pb-14pxpadding-bottom: 4px;Small bottom padding
.pb-28pxpadding-bottom: 8px;Small bottom padding
.pb-312pxpadding-bottom: 12px;Medium bottom padding
.pb-416pxpadding-bottom: 16px;Standard bottom padding
.pb-624pxpadding-bottom: 24px;Large bottom padding
.pb-832pxpadding-bottom: 32px;Extra large bottom padding

​
Horizontal Padding

Horizontal Padding

.px-2Horizontal8pxpadding-left: 8px; padding-right: 8px;Small horizontal padding
.px-3Horizontal12pxpadding-left: 12px; padding-right: 12px;Medium horizontal padding
.px-4Horizontal16pxpadding-left: 16px; padding-right: 16px;Standard horizontal padding
.px-6Horizontal24pxpadding-left: 24px; padding-right: 24px;Large horizontal padding
.px-8Horizontal32pxpadding-left: 32px; padding-right: 32px;Extra large horizontal padding

​
Vertical Padding

Vertical Padding

.py-2Vertical8pxpadding-top: 8px; padding-bottom: 8px;Small vertical padding
.py-3Vertical12pxpadding-top: 12px; padding-bottom: 12px;Medium vertical padding
.py-4Vertical16pxpadding-top: 16px; padding-bottom: 16px;Standard vertical padding
.py-6Vertical24pxpadding-top: 24px; padding-bottom: 24px;Large vertical padding
.py-8Vertical32pxpadding-top: 32px; padding-bottom: 32px;Extra large vertical padding

​
Examples

<!-- Padding examples -->
<div class="p-4 bg-blue text-white">Standard padding all around</div>
<div class="px-6 py-4 bg-green text-white">Horizontal and vertical padding</div>
<div class="pt-6 pb-4 px-4 bg-red text-white">Mixed padding values</div>

​
Gap

Control spacing between flex items with gap utilities.

Gap Properties

.gap-14pxgap: 4px;Small gap
.gap-28pxgap: 8px;Small gap
.gap-312pxgap: 12px;Medium gap
.gap-416pxgap: 16px;Standard gap
.gap-624pxgap: 24px;Large gap
.gap-832pxgap: 32px;Extra large gap

​
Examples

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

<div class="flex gap-6">
  <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>

​
Common Spacing Patterns

​
Card Layout

Card with Consistent Spacing

<div class="card p-6 mb-4">
  <h3 class="text-xl font-600 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 with Proper Spacing

<form class="max-w-md">
  <div class="mb-4">
    <label class="text-sm font-500 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-500 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 with Vertical Rhythm

<section class="py-12">
  <div class="cont">
    <h2 class="text-3xl font-700 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>

Navigation with Proper Spacing

<nav class="flex items-center justify-between px-6 py-4 bg-white">
  <h1 class="text-2xl font-700">Logo</h1>
  <div class="flex gap-6">
    <a href="#" class="text-base text-gray">
      Home
    </a>
    <a href="#" class="text-base text-gray">
      About
    </a>
    <a href="#" class="text-base text-gray">
      Contact
    </a>
  </div>
</nav>

​
Spacing Best Practices

​
Consistent Scale

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

Consider Content Density

Adjust spacing based on content density and user experience needs.

​
Responsive Spacing

<!-- Responsive spacing example -->
<div class="p-4 md:p-6 lg:p-8">
  <h2 class="text-2xl md:text-3xl font-700 mb-4 md:mb-6">Title</h2>
  <p class="text-base md:text-lg leading-relaxed">
    Content with responsive spacing
  </p>
</div>

​
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

​
Common Mistakes

Avoid these spacing mistakes:
  • Don’t mix different spacing scales inconsistently
  • Don’t use margin for spacing between flex items (use gap instead)
  • Don’t forget to consider mobile spacing needs
  • Don’t overuse auto margins for centering (use flexbox utilities instead)

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