Padding

1 min read | Tailwind CSS Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Padding adds space inside an element's border, between the border and the content. Like margin, Tailwind's padding scale uses 0.25rem per unit.

Padding sides


<div class="p-4">padding on all sides — 16px</div>
<div class="px-4">padding left and right</div>
<div class="py-4">padding top and bottom</div>
<div class="pt-4">padding top only</div>
<div class="pr-4">padding right only</div>
<div class="pb-4">padding bottom only</div>
<div class="pl-4">padding left only</div>

The spacing scale

Tailwind's default spacing scale runs from 0 to 96. Here are some common values:


<div class="p-0">No padding</div>
<div class="p-1">4px — tight</div>
<div class="p-2">8px — small</div>
<div class="p-3">12px — medium</div>
<div class="p-4">16px — standard</div>
<div class="p-5">20px — comfortable</div>
<div class="p-6">24px — spacious</div>
<div class="p-8">32px — large</div>
<div class="p-10">40px — extra large</div>
<div class="p-12">48px — section spacing</div>
<div class="p-16">64px — hero spacing</div>

Padding vs margin

Use padding for internal spacing — the space between an element's content and its border. Use margin for external spacing — the space between an element and its neighbors. Padding never collapses; margin can collapse with adjacent margins.