Skip to main content

​
Overview

Use margin utilities to control the space around elements. Margins create space outside an element’s border, pushing other elements away. These utilities work with a consistent 4px scale and include both static and fluid variants for responsive designs.

​
Spacing Scale

All margin 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

​
All Sides Margin

Apply margin to all sides of an element at once.

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

​
Examples

<!-- All sides margin -->
<div class="m-4 p-4 bg-blue text-white">
  Standard margin all around
</div>

<!-- Auto margin for centering -->
<div class="m-auto p-4 bg-green text-white max-w-md">
  Centered with auto margin
</div>

​
Vertical Margin

Control top and bottom margins independently.

​
Top 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

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

​
Examples

<!-- Top and bottom margins -->
<div class="mt-6 mb-4 p-4 bg-green text-white">
  Different top and bottom margins
</div>

<!-- Section spacing -->
<section class="mt-12 mb-8">
  <h2 class="text-3xl font-bold">Section Title</h2>
  <p class="text-gray">Section content</p>
</section>

​
Horizontal Margin

Control left and right margins, including auto margins for centering.

Horizontal Margin

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

​
Examples

<!-- Auto left margin (pushed right) -->
<div class="ml-auto p-4 bg-red text-white max-w-md">
  Pushed to the right
</div>

<!-- Auto right margin (pushed left) -->
<div class="mr-auto p-4 bg-yellow text-white max-w-md">
  Pushed to the left
</div>

<!-- Centered with auto margins -->
<div class="mx-auto p-4 bg-blue text-white max-w-md">
  Centered element
</div>
Use .ml-auto or .mr-auto (or combine both for .mx-auto) to center elements horizontally. This works especially well with max-width utilities.

​
Fluid Margin

Fluid margin utilities use clamp() to scale smoothly between mobile and desktop sizes. They’re perfect for hero sections, marketing pages, and responsive layouts that need to adapt automatically.

​
All Sides Fluid Margin

Fluid Margin Utilities

ClassClamp ExpressionMobile → Desktop
.m-fluid-1clamp(0.25rem, calc(0.21rem + 0.09vw), 0.31rem)4px → 5px
.m-fluid-2clamp(0.5rem, calc(0.43rem + 0.18vw), 0.63rem)8px → 10px
.m-fluid-3clamp(0.75rem, calc(0.64rem + 0.27vw), 0.94rem)12px → 15px
.m-fluid-4clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)16px → 20px
.m-fluid-6clamp(1.5rem, calc(1.28rem + 0.56vw), 1.88rem)24px → 30px
.m-fluid-8clamp(2rem, calc(1.71rem + 0.74vw), 2.5rem)32px → 40px
.m-fluid-12clamp(3rem, calc(2.56rem + 1.1vw), 3.75rem)48px → 60px

​
Fluid Margin Top/Bottom

Fluid Margin Top

ClassClamp ExpressionMobile → Desktop
.mt-fluid-1clamp(0.25rem, calc(0.21rem + 0.09vw), 0.31rem)4px → 5px
.mt-fluid-2clamp(0.5rem, calc(0.43rem + 0.18vw), 0.63rem)8px → 10px
.mt-fluid-3clamp(0.75rem, calc(0.64rem + 0.27vw), 0.94rem)12px → 15px
.mt-fluid-4clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)16px → 20px
.mt-fluid-6clamp(1.5rem, calc(1.28rem + 0.56vw), 1.88rem)24px → 30px
.mt-fluid-8clamp(2rem, calc(1.71rem + 0.74vw), 2.5rem)32px → 40px
.mt-fluid-12clamp(3rem, calc(2.56rem + 1.1vw), 3.75rem)48px → 60px

Fluid Margin Bottom

ClassClamp ExpressionMobile → Desktop
.mb-fluid-1clamp(0.25rem, calc(0.21rem + 0.09vw), 0.31rem)4px → 5px
.mb-fluid-2clamp(0.5rem, calc(0.43rem + 0.18vw), 0.63rem)8px → 10px
.mb-fluid-3clamp(0.75rem, calc(0.64rem + 0.27vw), 0.94rem)12px → 15px
.mb-fluid-4clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)16px → 20px
.mb-fluid-6clamp(1.5rem, calc(1.28rem + 0.56vw), 1.88rem)24px → 30px
.mb-fluid-8clamp(2rem, calc(1.71rem + 0.74vw), 2.5rem)32px → 40px
.mb-fluid-12clamp(3rem, calc(2.56rem + 1.1vw), 3.75rem)48px → 60px

​
Fluid Margin Examples

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

<!-- Card with fluid bottom margin -->
<div class="card p-6 mb-fluid-4">
  <h3 class="text-xl font-semibold mb-fluid-2">Card Title</h3>
  <p class="text-gray">Content with responsive margin</p>
</div>
Use fluid margin utilities for hero sections, marketing pages, and any content that needs to scale smoothly across viewport sizes. They work especially well when paired with fluid typography utilities.

​
Common Margin Patterns

​
Section Spacing

<section class="mt-12 mb-8">
  <h2 class="text-3xl font-bold mb-6">Section Title</h2>
  <p class="text-lg text-gray mb-4">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>
</section>

​
Centered Content

<div class="mx-auto max-w-2xl mt-8 mb-12">
  <h1 class="text-3xl font-bold mb-4">Centered Content</h1>
  <p class="text-gray">Content with centered layout</p>
</div>

​
Form Field Spacing

<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>

​
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

Use Auto for Centering

Use .ml-auto, .mr-auto, or both for horizontal centering instead of manual calculations.
4

Consider Mobile

Use fluid margins for responsive designs that need to scale smoothly across breakpoints.

​
Common Mistakes

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

Padding

Control internal spacing with padding utilities

Gap

Control spacing between flex items

Layout

Flexbox and display utilities for layout

Sizing

Width and height utilities