Padding

Padding define o espaçamento interno de um elemento — a distância entre seu conteúdo e suas bordas. No Tailwind CSS, o controle de padding é feito por meio de utilitárias simples e consistentes, seguindo a mesma escala usada para margens.

---

Sintaxe das classes de padding

Copyp     => padding (todos os lados)  
px    => padding horizontal (esquerda e direita)  
py    => padding vertical (superior e inferior)  
pt    => padding superior  
pr    => padding direita  
pb    => padding inferior  
pl    => padding esquerda  

---

Exemplos de uso

Copy<!-- Padding em todos os lados -->
<div class="p-4 bg-gray-100">Espaço interno em todos os lados</div>

<!-- Padding horizontal -->
<div class="px-6 bg-gray-200">Espaço interno nas laterais</div>

<!-- Padding vertical -->
<div class="py-3 bg-gray-300">Espaço acima e abaixo do conteúdo</div>

<!-- Padding por lado -->
<div class="pt-2 pr-4 pb-6 pl-1 bg-gray-400">
  Padding personalizado por lado
</div>

---

Valores disponíveis

O Tailwind utiliza a mesma escala de espaçamento para padding:

• p-0, p-1, p-2, ..., p-96

• p-px: 1px de padding

Copy<!-- Exemplo com escala alta -->
<div class="p-10 bg-blue-100">Padding grande (40px)</div>

---

Uso típico em componentes

O padding é frequentemente utilizado para definir o "respiro" dentro de caixas, botões, cards e blocos de conteúdo.

Copy<button class="px-4 py-2 bg-blue-600 text-white rounded">
  Botão com padding horizontal e vertical
</button>

<div class="p-6 bg-white shadow rounded">
  <h3 class="text-lg font-semibold mb-2">Título</h3>
  <p class="text-gray-600">Conteúdo com espaçamento interno adequado.</p>
</div>

---

Boas práticas

• Combine px e py para ajustes proporcionais em layouts responsivos.

• Use padding para melhorar legibilidade e experiência de leitura.

• Em elementos clicáveis (botões, links, inputs), o padding aumenta a área de toque.