Padding Utilities
Apply uniform padding with p-*, and control individual sides with pt-*, pr-*, pb-*, pl-*, px-*, and py-*.
What Is Padding?
Padding is the space between an element's content and its border. It is part of the CSS box model: every element has content, padding, border, and margin layers. Padding adds breathing room inside an element — a button with no padding has its text touching the edges, while py-2 px-4 creates comfortable vertical and horizontal cushioning around the label.
<!-- No padding: cramped -->
<button class="bg-indigo-600 text-white rounded">Submit</button>
<!-- With padding: comfortable -->
<button class="bg-indigo-600 text-white rounded py-2 px-6">Submit</button>Uniform Padding: p-*
The p-* utility applies equal padding to all four sides of an element at once. p-4 sets 16px on top, right, bottom, and left. This is the most common starting point for cards, modals, and section containers. Use p-0 to explicitly remove all padding when an inherited or default style adds unwanted spacing.
<div class="p-0 bg-gray-100">No padding</div>
<div class="p-2 bg-gray-200 mt-2">Compact (8px all sides)</div>
<div class="p-4 bg-gray-300 mt-2">Standard (16px all sides)</div>
<div class="p-8 bg-gray-400 mt-2">Spacious (32px all sides)</div>