Carregando...

Padding CSS

O margin afasta as caixas. Muitas vezes você também precisa de espaço dentro da caixa — para o texto não colar na borda e os botões serem fáceis de tocar. Esse colchão interno é padding.

O que é padding?

Padding é espaço vazio entre o conteúdo de um elemento e sua borda. Vive dentro da borda. Mais padding afasta o conteúdo das bordas e a caixa costuma crescer (a menos que mude box-sizing depois).

Padding vs margin num relance

São fáceis de misturar. Mantenha os trabalhos separados.

📊 Padding vs margin

Ferramenta Onde fica Trabalho diário
padding Dentro da borda Amortecer texto, ampliar área clicável
margin Fora da borda Separar esta caixa das vizinhas
Fundo Costuma preencher o padding Cor/imagem costuma cobrir o colchão
Colapso vertical Padding não colapsa Margens de blocos empilhados podem

Mesmo padding em cada lado

Comece com um comprimento para um card calmo.

Mesmo padding em todos os lados

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* vão exterior — outra ferramenta */
}

O que você deve notar

O texto fica longe da borda cinza. O fundo branco também preenche a zona de padding — não só as letras.

Dois valores — vertical, depois horizontal

Dois comprimentos emparelham lados opostos: primeiro topo e base; depois esquerda e direita.

Padding vertical depois horizontal

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Quatro valores — horário a partir do topo

Quando cada lado precisa do próprio colchão: topo → direita → base → esquerda.

Atalho padding de quatro lados

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Botões adoram padding

Padding amplia a área confortável de toque sem mudar o tamanho do texto do rótulo. Um rótulo curto com padding generoso parece moderno e fácil de clicar.

Botão com padding

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

O fundo preenche o padding

Ao contrário do margin (fora), o padding ainda faz parte da caixa pintada do elemento. Uma cor ou imagem de fundo costuma cobrir a zona de padding.

Zona de padding colorida

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

Experimente você

  1. Card com padding: 16px e borda visível — o texto não cola na borda.
  2. Reescreva como padding: 20px 12px e sinta colchão mais alto vs mais largo.
  3. Botão com mais padding horizontal do que vertical.
  4. Banner teal com padding grande e borda mais escura — a cor preenche o colchão.
  5. Dois cards só com margin entre eles, depois só padding dentro de um — sinta os trabalhos diferentes.

Erros comuns

  • Usar padding para afastar caixas (isso é trabalho do margin)
  • Esperar que paddings entre irmãos colapsem como margens verticais (não colapsam)
  • Esquecer que o fundo costuma pintar pela zona de padding
  • Padding enorme em cada lado quando uma escala modesta lê melhor
  • Misturar a ordem dos quatro valores (topo, direita, base, esquerda)

Resumo

  • Padding é espaço interno entre conteúdo e borda
  • Atalho: 1, 2 ou 4 valores (quatro no horário a partir do topo)
  • O fundo costuma preencher a zona de padding
  • Padding não colapsa como as margens verticais podem
  • Botões e cards dependem de padding para conforto
  • Margin continua o primo exterior — mantenha as duas ferramentas afiadas

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial