Propriedade padding: O 'acolchoamento' interno da caixa

No Box Model, você já sabe que cada elemento é uma caixa. Depois da área de conteúdo, temos o preenchimento (padding). O padding é o espaço transparente que existe entre o conteúdo de um elemento e sua borda.

Pense no padding como o "acolchoamento" ou a "espuma protetora" dentro de uma caixa de presente. Ele empurra o conteúdo para longe das bordas da caixa, criando um respiro e evitando que o texto ou imagem fiquem "colados" nas extremidades do elemento.

Como usar a propriedade padding

A sintaxe é simples: você seleciona o elemento e atribui um valor à propriedade padding.

Sintaxe:

seletor {
  padding: valor;
}

Valores possíveis:

A propriedade padding aceita valores de comprimento (px, em, rem, %) e pode ser definida para todos os lados de uma vez ou para lados específicos.

1. Definindo padding para todos os lados

• Um valor: Aplica o mesmo padding para os quatro lados (topo, direita, baixo, esquerda).
  • Exemplo: padding: 10px; (10px em todos os lados)

2. Definindo padding para lados específicos (Propriedades Individuais)

Você pode controlar o padding de cada lado individualmente:

• padding-top: Espaçamento na parte superior.

• padding-right: Espaçamento na parte direita.

• padding-bottom: Espaçamento na parte inferior.

• padding-left: Espaçamento na parte esquerda.

  • Exemplo:

    div {
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 15px;
      padding-left: 20px;
    }
    

3. Definindo padding com a Shorthand (Atalho)

A propriedade padding também aceita múltiplos valores para definir o espaçamento de forma mais concisa:

• Dois valores:

  • O primeiro valor aplica-se ao topo e baixo.
  • O segundo valor aplica-se à direita e esquerda.
  • Exemplo: padding: 10px 20px; (10px no topo/baixo, 20px na direita/esquerda)

• Três valores:

  • O primeiro valor aplica-se ao topo.
  • O segundo valor aplica-se à direita e esquerda.
  • O terceiro valor aplica-se ao baixo.
  • Exemplo: padding: 5px 10px 15px; (5px no topo, 10px na direita/esquerda, 15px no baixo)

• Quatro valores:

  • Os valores aplicam-se na ordem topo, direita, baixo, esquerda (sentido horário, começando pelo topo).
  • Exemplo: padding: 5px 10px 15px 20px; (5px topo, 10px direita, 15px baixo, 20px esquerda)

Unidades de Medida para padding

Assim como width e height, padding aceita:

• px (pixels): Para um espaçamento fixo.
• em / rem: Para espaçamento que escala com o font-size.
• % (porcentagem): Relativa à largura do elemento pai. Isso é importante: mesmo que você defina padding-top: 10%;, ele será 10% da largura do pai, não da altura.

Efeito do padding no tamanho total do elemento

É crucial entender que o padding aumenta o tamanho total de um elemento.

Se um div tem width: 100px; e padding: 10px;, a largura total visível do div será: 100px (conteúdo) + 10px (padding esquerdo) + 10px (padding direito) = 120px.

Isso pode ser um comportamento inesperado para iniciantes e é um dos motivos pelos quais a propriedade box-sizing (que veremos em uma lição futura) é tão importante.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Padding</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .box {
      width: 200px; /* Largura do conteúdo */
      height: 80px; /* Altura do conteúdo */
      background-color: lightblue;
      border: 2px solid blue;
      margin-bottom: 20px;
      text-align: center;
      line-height: 80px; /* Para centralizar o texto verticalmente neste exemplo */
    }

    .padding-all {
      padding: 15px; /* 15px em todos os lados */
      /* Largura total: 200 + 15 + 15 + 2 + 2 = 234px */
      /* Altura total: 80 + 15 + 15 + 2 + 2 = 114px */
    }

    .padding-sides {
      padding: 10px 20px; /* 10px topo/baixo, 20px direita/esquerda */
      /* Largura total: 200 + 20 + 20 + 2 + 2 = 244px */
      /* Altura total: 80 + 10 + 10 + 2 + 2 = 114px */
    }

    .padding-individual {
      padding-top: 5px;
      padding-right: 25px;
      padding-bottom: 15px;
      padding-left: 30px;
      /* Largura total: 200 + 25 + 30 + 2 + 2 = 259px */
      /* Altura total: 80 + 5 + 15 + 2 + 2 = 104px */
    }

    .padding-percent {
      width: 50%; /* 50% da largura do pai */
      padding: 5%; /* 5% da largura do pai para todos os lados */
      background-color: lightgreen;
      border-color: green;
      /* A largura total será 50% + 5% + 5% + 2px + 2px */
      /* A altura total será 80px + 5% + 5% + 2px + 2px */
    }
  </style>
</head>
<body>
  <div class="box padding-all">
    Padding: 15px (todos os lados)
  </div>

  <div class="box padding-sides">
    Padding: 10px (T/B) 20px (D/E)
  </div>

  <div class="box padding-individual">
    Padding: 5px T, 25px D, 15px B, 30px E
  </div>

  <div class="box padding-percent">
    Padding: 5% (relativo à largura do pai)
  </div>
</body>
</html>

Resultado: Inspecione cada caixa com as ferramentas de desenvolvedor para ver como o padding afeta o tamanho total do elemento e o espaço interno.

Boas Práticas:

• Respiro para o Conteúdo: Use padding para criar um "respiro" entre o conteúdo e as bordas do elemento, melhorando a legibilidade e a estética.
• Não para Espaçamento Externo: Não use padding para criar espaço entre elementos. Para isso, use margin.
• Cuidado com o Tamanho Total: Lembre-se que padding aumenta o tamanho total do elemento (a menos que você use box-sizing: border-box;, que veremos mais tarde).
• Unidades Relativas: Para layouts responsivos, considere usar em, rem ou % para padding, mas tenha em mente que % é relativo à largura do pai.

Dominar o padding é essencial para controlar o espaçamento interno dos seus elementos, garantindo que o conteúdo seja apresentado de forma clara e agradável.