Padding & Margin in Tailwind CSS
From the Tailwind CSS cheat sheet · Spacing & Sizing · verified Jul 2026
Padding & Margin
Control inner and outer spacing.
html
<!-- Padding (all sides, x, y, individual) -->
<div class="p-4">All sides</div>
<div class="px-4 py-2">Horizontal + vertical</div>
<div class="pt-8 pb-4">Top + bottom</div>
<!-- Margin -->
<div class="m-4">All sides</div>
<div class="mx-auto">Center horizontally</div>
<div class="mt-8 mb-4">Top + bottom</div>
<div class="-mt-4">Negative margin</div>💡 Use gap-4 on flex/grid instead of space-x/y — gap is more reliable with wrapping
⚡ mx-auto centers a block element; ml-auto pushes it to the right
📌 divide-y adds borders between children — much cleaner than border-b on each item
🟢 Negative margins (-mt-4) let elements overlap — useful for overlapping cards/avatars
paddingmarginspacingdivide