Spacing

Scale

Padding vs. Margin

Padding is the space inside an element, between its border and its content. It pushes content inward and is part of the element's clickable/visible area. Use padding to create breathing room within a component.

Margin is the space outside an element, between its border and its neighbours. It pushes adjacent elements away. Use margin to create separation between components.

1
{/* Padding — space inside the card */}
2
<div class="p-6 border rounded-lg">Card content</div>
3
 
4
{/* Margin — space between cards */}
5
<div class="mt-8">Next section</div>
6
 
7
{/* Gap — preferred for flex/grid children */}
8
<div class="flex gap-4">
9
  <div>Item 1</div>
10
  <div>Item 2</div>
11
</div>

Directional spacing

Tailwind provides directional variants for both padding and margin. Use these to control spacing on specific axes.

Vertical (top/bottom)

Use py-* for symmetric vertical padding, or pt-* / pb-* to target one side. For margin, use my-*, mt-*, mb-*.

1
{/* Symmetric vertical padding */}
2
<section class="py-12">Equal top and bottom</section>
3
 
4
{/* Asymmetric — more space above */}
5
<section class="pt-16 pb-8">More breathing room above</section>
6
 
7
{/* Vertical margin between sections */}
8
<div class="my-10">Spaced equally from siblings</div>

Horizontal (left/right)

Use px-* for symmetric horizontal padding, or pl-* / pr-* to target one side. For margin, use mx-*, ml-*, mr-*. For centering, mx-auto is the standard pattern.

1
{/* Symmetric horizontal padding */}
2
<div class="px-6">Content with side padding</div>
3
 
4
{/* Centered container */}
5
<div class="mx-auto max-w-5xl px-8">Centered content</div>
6
 
7
{/* RTL-safe: use logical properties */}
8
<div class="ps-4 pe-2">Start/end padding (flips for RTL)</div>

Guidelines

• Use the scale — avoid arbitrary pixel values. Consistent spacing creates visual rhythm and makes responsive adjustments predictable.
• Prefer gap — when spacing flex or grid children, use gap-* instead of adding margins to individual items.
• Component padding — most components use p-3 or p-4 for internal padding. Cards and panels typically use p-6.
• Section spacing — vertical spacing between page sections uses py-12 to py-20 depending on visual weight.