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.