Padding

Padding controls the space inside an element, between the content and the border.

The prefix is p, and it uses the exact same directional scale as margin:

• p-4: Padding on all sides
• px-6: Padding left and right
• py-2: Padding top and bottom
• pt-8: Padding top

<button class="bg-blue-500 text-white px-4 py-2">
  Button with padding
</button>

CSS Relationship

p-4 corresponds conceptually to CSS padding: 1rem;.