Spacing and sizing are fundamental to creating polished, professional layouts. Tailwind provides a consistent spacing scale and comprehensive sizing utilities that make it easy to create perfectly spaced designs. In this lesson, you'll master padding, margin, width, height, and understand the rem-based spacing system that powers Tailwind's design consistency.
The Spacing Scale
Tailwind uses a consistent spacing scale based on rem units. Each step in the scale represents 0.25rem (4px by default):
How the Spacing Scale Works
0= 0rem = 0px1= 0.25rem = 4px2= 0.5rem = 8px3= 0.75rem = 12px4= 1rem = 16px5= 1.25rem = 20px6= 1.5rem = 24px8= 2rem = 32px10= 2.5rem = 40px12= 3rem = 48px16= 4rem = 64px- ...continues up to
96= 24rem = 384px
💡 Why rem Units?
Using rem (root em) instead of pixels has benefits:
- Respects user's browser font size preferences
- Better accessibility for users who zoom text
- Consistent scaling across the entire design
- Easy to adjust the entire spacing scale by changing the root font size
Common Spacing Values
You'll use these spacing values most frequently:
HTML
<!-- Very tight spacing -->
<div class="p-1">4px padding</div>
<div class="p-2">8px padding</div>
<!-- Common small spacing -->
<div class="p-3">12px padding</div>
<div class="p-4">16px padding</div>
<!-- Medium spacing -->
<div class="p-6">24px padding</div>
<div class="p-8">32px padding</div>
<!-- Large spacing -->
<div class="p-10">40px padding</div>
<div class="p-12">48px padding</div>
<!-- Extra large spacing -->
<div class="p-16">64px padding</div>
<div class="p-24">96px padding</div>Padding Utilities
Padding adds space inside an element, between its content and its border:
All Sides
HTML
<!-- Same padding on all sides -->
<div class="p-0">No padding</div>
<div class="p-4">16px padding all sides</div>
<div class="p-8">32px padding all sides</div>Horizontal and Vertical
HTML
<!-- Horizontal padding (left and right) -->
<div class="px-4">16px padding left and right</div>
<div class="px-8">32px padding left and right</div>
<!-- Vertical padding (top and bottom) -->
<div class="py-4">16px padding top and bottom</div>
<div class="py-8">32px padding top and bottom</div>
<!-- Combine them -->
<div class="px-6 py-4">
24px horizontal, 16px vertical padding
</div>Individual Sides
HTML
<!-- Top padding -->
<div class="pt-4">16px padding top only</div>
<!-- Right padding -->
<div class="pr-4">16px padding right only</div>
<!-- Bottom padding -->
<div class="pb-4">16px padding bottom only</div>
<!-- Left padding -->
<div class="pl-4">16px padding left only</div>
<!-- Mix and match -->
<div class="pt-8 pr-6 pb-4 pl-2">
Different padding on each side
</div>Responsive Padding
HTML
<!-- Small padding on mobile, larger on desktop -->
<div class="p-4 md:p-6 lg:p-8">
16px → 24px → 32px padding
</div>
<!-- Horizontal padding increases with screen size -->
<div class="px-4 md:px-8 lg:px-16 py-6">
Responsive horizontal padding
</div>Common Padding Patterns
p-4orp-6- Card paddingpx-6 py-3- Button paddingp-8 md:p-12- Section padding (responsive)px-4 py-2- Small component padding
Margin Utilities
Margin adds space outside an element, between it and other elements:
All Sides
HTML
<!-- Same margin on all sides -->
<div class="m-0">No margin</div>
<div class="m-4">16px margin all sides</div>
<div class="m-8">32px margin all sides</div>Horizontal and Vertical
HTML
<!-- Horizontal margin (left and right) -->
<div class="mx-4">16px margin left and right</div>
<!-- Vertical margin (top and bottom) -->
<div class="my-4">16px margin top and bottom</div>
<!-- Center horizontally with auto margins -->
<div class="mx-auto max-w-4xl">
Centered container
</div>Individual Sides
HTML
<!-- Top margin -->
<div class="mt-4">16px margin top</div>
<!-- Right margin -->
<div class="mr-4">16px margin right</div>
<!-- Bottom margin -->
<div class="mb-4">16px margin bottom</div>
<!-- Left margin -->
<div class="ml-4">16px margin left</div>Negative Margins
Pull elements closer or create overlapping effects:
HTML
<!-- Negative top margin (pulls element up) -->
<div class="-mt-4">Pulled up 16px</div>
<!-- Negative margins on all sides -->
<div class="-m-4">Negative 16px margin all sides</div>
<!-- Create overlapping cards -->
<div class="space-y-4">
<div class="bg-blue-500 p-6 rounded-lg">Card 1</div>
<div class="bg-green-500 p-6 rounded-lg -mt-4">
Card 2 (overlaps Card 1)
</div>
</div>Auto Margins (Centering)
HTML
<!-- Center horizontally -->
<div class="mx-auto w-64">
Centered element with fixed width
</div>
<!-- Push to the right -->
<div class="ml-auto w-32">
Aligned to the right
</div>
<!-- Space between pattern -->
<div class="flex">
<div>Left item</div>
<div class="ml-auto">Right item (pushed)</div>
</div>⚠️ Margin vs Padding
Use padding when:
- You want space inside an element (around content)
- You want the background/border to extend into the space
Use margin when:
- You want space between elements
- You want to center elements
- You don't want background/border in the space
Space Between Utilities
Add consistent spacing between child elements (super useful!):
HTML
<!-- Vertical spacing between children -->
<div class="space-y-4">
<div class="bg-blue-500 p-4">Item 1</div>
<div class="bg-blue-500 p-4">Item 2</div>
<div class="bg-blue-500 p-4">Item 3</div>
<!-- 16px margin between each item -->
</div>
<!-- Horizontal spacing between children -->
<div class="flex space-x-4">
<div class="bg-green-500 p-4">Item 1</div>
<div class="bg-green-500 p-4">Item 2</div>
<div class="bg-green-500 p-4">Item 3</div>
<!-- 16px margin between each item -->
</div>
<!-- Responsive spacing -->
<div class="space-y-2 md:space-y-4 lg:space-y-6">
<div class="bg-purple-500 p-4">Item 1</div>
<div class="bg-purple-500 p-4">Item 2</div>
<div class="bg-purple-500 p-4">Item 3</div>
<!-- 8px → 16px → 24px spacing -->
</div>How space-y and space-x work: They add margin-top to all children except the first (for space-y) or margin-left to all children except the first (for space-x).
Space Between vs Gap
HTML
<!-- Space Between (uses margins) -->
<div class="space-y-4">
<div>Item</div>
<div>Item</div>
</div>
<!-- Gap (for flex/grid, cleaner) -->
<div class="flex flex-col gap-4">
<div>Item</div>
<div>Item</div>
</div>
<!-- Use gap with flex/grid, space-between otherwise -->🎯 When to Use What
- Use
gapwith Flexbox and Grid - Use
space-y/space-xwith regular block elements - Both achieve similar results, but gap is cleaner for flex/grid
Width Utilities
Control element width with fixed, fractional, or viewport-based values:
Fixed Width
HTML
<!-- Using spacing scale -->
<div class="w-0">0px width</div>
<div class="w-4">16px (1rem) width</div>
<div class="w-8">32px (2rem) width</div>
<div class="w-16">64px (4rem) width</div>
<div class="w-32">128px (8rem) width</div>
<div class="w-64">256px (16rem) width</div>
<div class="w-96">384px (24rem) width</div>
<!-- Special values -->
<div class="w-auto">Auto width</div>
<div class="w-full">100% width</div>
<div class="w-screen">100vw (viewport width)</div>Fractional Width (Percentages)
HTML
<!-- Halves -->
<div class="w-1/2">50% width</div>
<!-- Thirds -->
<div class="w-1/3">33.333% width</div>
<div class="w-2/3">66.666% width</div>
<!-- Quarters -->
<div class="w-1/4">25% width</div>
<div class="w-2/4">50% width (same as w-1/2)</div>
<div class="w-3/4">75% width</div>
<!-- Fifths -->
<div class="w-1/5">20% width</div>
<div class="w-2/5">40% width</div>
<div class="w-3/5">60% width</div>
<div class="w-4/5">80% width</div>
<!-- Sixths -->
<div class="w-1/6">16.666% width</div>
<div class="w-5/6">83.333% width</div>
<!-- Twelfths (useful for grid systems) -->
<div class="w-1/12">8.333% width</div>
<div class="w-5/12">41.666% width</div>
<div class="w-7/12">58.333% width</div>Max Width
HTML
<!-- Common max-widths for content -->
<div class="max-w-sm">384px max-width (24rem)</div>
<div class="max-w-md">448px max-width (28rem)</div>
<div class="max-w-lg">512px max-width (32rem)</div>
<div class="max-w-xl">576px max-width (36rem)</div>
<div class="max-w-2xl">672px max-width (42rem)</div>
<div class="max-w-3xl">768px max-width (48rem)</div>
<div class="max-w-4xl">896px max-width (56rem)</div>
<div class="max-w-5xl">1024px max-width (64rem)</div>
<div class="max-w-6xl">1152px max-width (72rem)</div>
<div class="max-w-7xl">1280px max-width (80rem)</div>
<!-- Special max-widths -->
<div class="max-w-full">100% max-width</div>
<div class="max-w-screen-sm">640px (breakpoint width)</div>
<div class="max-w-screen-lg">1024px (breakpoint width)</div>
<div class="max-w-none">No max-width</div>
<!-- Centered content container pattern -->
<div class="max-w-4xl mx-auto px-4">
Centered content with max-width
</div>Min Width
HTML
<!-- Minimum widths -->
<div class="min-w-0">0px min-width</div>
<div class="min-w-full">100% min-width</div>
<div class="min-w-min">min-content</div>
<div class="min-w-max">max-content</div>
<!-- Prevent text truncation -->
<div class="min-w-[200px]">
At least 200px wide
</div>Common Width Patterns
w-full- Full-width buttons, inputsmax-w-7xl mx-auto- Centered page containerw-64- Fixed-width sidebarw-1/2 md:w-1/3- Responsive card width
Height Utilities
Control element height similarly to width:
Fixed Height
HTML
<!-- Using spacing scale -->
<div class="h-4">16px (1rem) height</div>
<div class="h-8">32px (2rem) height</div>
<div class="h-16">64px (4rem) height</div>
<div class="h-32">128px (8rem) height</div>
<div class="h-64">256px (16rem) height</div>
<div class="h-96">384px (24rem) height</div>
<!-- Special values -->
<div class="h-auto">Auto height</div>
<div class="h-full">100% height</div>
<div class="h-screen">100vh (viewport height)</div>Fractional Height
HTML
<!-- Fractions (less common than width fractions) -->
<div class="h-1/2">50% height</div>
<div class="h-1/3">33.333% height</div>
<div class="h-2/3">66.666% height</div>
<div class="h-1/4">25% height</div>
<div class="h-3/4">75% height</div>
<div class="h-full">100% height</div>Min and Max Height
HTML
<!-- Minimum heights -->
<div class="min-h-screen">
At least full viewport height
</div>
<div class="min-h-full">At least 100% height</div>
<div class="min-h-0">0px min-height</div>
<!-- Maximum heights -->
<div class="max-h-screen">
Maximum viewport height
</div>
<div class="max-h-96">Maximum 384px height</div>
<div class="max-h-full">Maximum 100% height</div>
<div class="max-h-none">No max-height</div>
<!-- Scrollable container pattern -->
<div class="max-h-96 overflow-y-auto">
Content that scrolls if it exceeds 384px
</div>📏 Height Best Practices
- Use
min-h-screenfor full-page sections - Use
h-autoto let content determine height - Combine
max-h-*withoverflow-autofor scrollable areas - Be careful with percentage heights - parent must have height
Size Utilities (Width + Height)
Set both width and height at once with size-*:
HTML
<!-- Square elements -->
<div class="size-8">32x32px square</div>
<div class="size-16">64x64px square</div>
<div class="size-32">128x128px square</div>
<!-- Perfect for icons, avatars -->
<div class="size-12 bg-blue-500 rounded-full">
<!-- 48x48px circle -->
</div>
<!-- Full size -->
<div class="size-full">100% width and height</div>
<!-- Arbitrary values -->
<div class="size-[200px]">200x200px square</div>Interactive Spacing Visualizer
Experiment with spacing utilities to see how they work:
Spacing & Sizing Explorer
Adjust padding, margin, and sizing to understand the spacing scale
024
Preview
Content
Blue area = padding space
Tailwind Class
p-4CSS Value
1rem (16px)Complete Spacing Scale
00rem
0.50.125rem
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
82rem
102.5rem
123rem
164rem
205rem
246rem
Practical Spacing Examples
Example 1: Card Component
HTML
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
<!-- Image -->
<img src="image.jpg" alt="Card" class="w-full h-48 object-cover">
<!-- Content with padding -->
<div class="p-6">
<!-- Heading with bottom margin -->
<h3 class="text-xl font-bold mb-2">
Card Title
</h3>
<!-- Text with bottom margin -->
<p class="text-gray-600 mb-4">
This is the card description with consistent spacing.
</p>
<!-- Tags with space between -->
<div class="flex gap-2 mb-4">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
Tag 1
</span>
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
Tag 2
</span>
</div>
<!-- Button -->
<button class="w-full bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600">
Read More
</button>
</div>
</div>Example 2: Form Layout
HTML
<form class="max-w-md mx-auto bg-white rounded-lg shadow p-8">
<h2 class="text-2xl font-bold mb-6">Sign Up</h2>
<!-- Input group with vertical spacing -->
<div class="space-y-4">
<!-- Name field -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
Full Name
</label>
<input
type="text"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="John Doe"
>
</div>
<!-- Email field -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
Email
</label>
<input
type="email"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="john@example.com"
>
</div>
<!-- Password field -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
Password
</label>
<input
type="password"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
placeholder="••••••••"
>
</div>
</div>
<!-- Submit button with top margin -->
<button class="w-full mt-6 bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600">
Create Account
</button>
<!-- Link with top margin -->
<p class="mt-4 text-center text-sm text-gray-600">
Already have an account?
<a href="#" class="text-blue-600 hover:underline">Sign in</a>
</p>
</form>Example 3: Responsive Section
HTML
<section class="py-12 md:py-16 lg:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section header with bottom margin -->
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
Our Features
</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
Discover what makes our product special
</p>
</div>
<!-- Feature grid with gap -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature item -->
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="w-12 h-12 bg-blue-500 rounded-lg mb-4"></div>
<h3 class="text-xl font-bold mb-3">Feature One</h3>
<p class="text-gray-600">Description of the feature...</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="w-12 h-12 bg-green-500 rounded-lg mb-4"></div>
<h3 class="text-xl font-bold mb-3">Feature Two</h3>
<p class="text-gray-600">Description of the feature...</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="w-12 h-12 bg-purple-500 rounded-lg mb-4"></div>
<h3 class="text-xl font-bold mb-3">Feature Three</h3>
<p class="text-gray-600">Description of the feature...</p>
</div>
</div>
</div>
</section>Example 4: Hero Section
HTML
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 px-4">
<div class="max-w-4xl mx-auto text-center text-white">
<!-- Main heading with bottom margin -->
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Build Something Amazing
</h1>
<!-- Subtitle with bottom margin -->
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">
The fastest way to create beautiful, responsive websites with Tailwind CSS
</p>
<!-- CTA buttons with gap -->
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="px-8 py-4 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition">
Get Started
</button>
<button class="px-8 py-4 bg-transparent border-2 border-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
Learn More
</button>
</div>
</div>
</section>Example 5: Sidebar Layout
HTML
<div class="flex min-h-screen">
<!-- Sidebar -->
<aside class="w-64 bg-gray-800 text-white p-6">
<!-- Logo with bottom margin -->
<div class="mb-8">
<h1 class="text-2xl font-bold">App Name</h1>
</div>
<!-- Navigation with vertical spacing -->
<nav class="space-y-2">
<a href="#" class="block px-4 py-3 bg-gray-700 rounded-lg">
Dashboard
</a>
<a href="#" class="block px-4 py-3 hover:bg-gray-700 rounded-lg">
Projects
</a>
<a href="#" class="block px-4 py-3 hover:bg-gray-700 rounded-lg">
Team
</a>
<a href="#" class="block px-4 py-3 hover:bg-gray-700 rounded-lg">
Settings
</a>
</nav>
</aside>
<!-- Main content -->
<main class="flex-1 p-8 bg-gray-50">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl font-bold mb-6">Dashboard</h2>
<!-- Stats grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<p class="text-sm text-gray-600 mb-2">Total Users</p>
<p class="text-3xl font-bold">1,234</p>
</div>
<!-- More stat cards... -->
</div>
<!-- Content area -->
<div class="bg-white rounded-lg shadow p-8">
<h3 class="text-xl font-bold mb-4">Recent Activity</h3>
<div class="space-y-4">
<div class="border-b border-gray-200 pb-4">Item 1</div>
<div class="border-b border-gray-200 pb-4">Item 2</div>
<div class="border-b border-gray-200 pb-4">Item 3</div>
</div>
</div>
</div>
</main>
</div>Arbitrary Values
Need a spacing value not in the default scale? Use arbitrary values:
HTML
<!-- Custom padding -->
<div class="p-[18px]">18px padding</div>
<!-- Custom margin -->
<div class="mt-[42px]">42px top margin</div>
<!-- Custom width -->
<div class="w-[350px]">350px width</div>
<!-- Custom height -->
<div class="h-[75vh]">75% viewport height</div>
<!-- Using calc() -->
<div class="w-[calc(100%-2rem)]">
Width: 100% minus 2rem
</div>
<!-- Percentage values -->
<div class="w-[45%]">45% width</div>⚠️ Use Sparingly
Arbitrary values are powerful but use them sparingly. They break the consistency of Tailwind's design system. Only use them when absolutely necessary.
Practice Playground
Experiment with spacing and sizing utilities:
Spacing & Sizing Practice
Adjust spacing values to create perfect layouts
Card Title
This is a card with carefully considered spacing. Notice the consistent margins and padding.
Item 1
Item 2
Item 3
Spacing Best Practices
Follow These Guidelines:
- Be consistent: Use values from the spacing scale, not arbitrary values
- Start small: Use smaller spacing (p-2, p-4) for compact designs
- Scale up responsively: Increase spacing on larger screens
- Use gap for flex/grid: Cleaner than margins
- Prefer padding for internal spacing: And margin for external
- Use max-width for readability: Don't let text lines get too long
- Center with mx-auto: Works great with max-width
Common Spacing Patterns
Memorize These Patterns:
max-w-7xl mx-auto px-4- Page containerpy-12 md:py-16 lg:py-24- Section paddingspace-y-4orgap-4- List/stack spacingpx-6 py-3- Button paddingp-8- Card paddingmb-4ormb-6- Element bottom marginw-full- Full-width form inputsmin-h-screen- Full-height sections
Key Takeaways
- Tailwind's spacing scale uses 0.25rem (4px) increments
- Padding adds space inside elements, margin adds space outside
- Use
p-*,px-*,py-*,pt-*, etc. for padding - Use
m-*,mx-*,my-*,mt-*, etc. for margin mx-autocenters elements horizontallyspace-y-*andspace-x-*add spacing between children- Use
gap-*with Flexbox and Grid - Width utilities include fixed, fractional, and viewport-based values
max-w-*limits width, perfect for readable content- Responsive spacing scales designs across screen sizes
What's Next?
You've mastered spacing and sizing—the foundation of polished layouts! You now understand how to create consistent, professional spacing throughout your designs.
In the next lesson, we'll explore Typography Utilities—learning how to style text with font families, sizes, weights, colors, alignment, and more to create beautiful, readable content.
🎯 Practice Challenge!
Create a pricing card with perfect spacing: appropriate padding inside the card, consistent margins between elements, and a centered layout. Make it responsive with different spacing at different breakpoints!
Test Your Understanding
Question 1 of 3Score: 0/0