Docs executáveis de CSS: Padding CSS

Q: Em que ordem ficam os valores do shorthand padding?

Em sentido horário a partir do topo: padding: top right bottom left;. Com três valores é topo, esquerda e direita, base; com dois valores, topo e base e depois esquerda e direita; com um valor, os quatro lados.

Q: O padding aumenta o tamanho do elemento?

Com o padrão box-sizing: content-box, sim: o padding é somado a width e height. Com box-sizing: border-box, o padding sai de dentro da largura, então o elemento mantém o tamanho que você definiu.

Q: Um padding em porcentagem é relativo a quê?

À largura do bloco que o contém, nos quatro lados. padding-top: 50% é metade da largura do pai, não da altura, e é por isso que os antigos truques de proporção usavam padding vertical.

Q: Como colocar padding no HTML?

Com CSS, em uma folha de estilo ou em um atributo style: . O HTML não tem atributo de padding para elementos em geral; o antigo atributo cellpadding das tabelas está obsoleto e foi substituído por padding em td e th.

O que é padding

Padding é o espaço dentro de um elemento, entre o conteúdo e a borda. Ele recebe o fundo do elemento, então é a propriedade que dá respiro a um botão, um card ou um badge.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

A área azul é o conteúdo. A faixa verde em volta são os 24px de padding em cada lado, e a borda fica por fora disso.

O shorthand padding: 1, 2, 3 ou 4 valores

padding define os quatro lados em uma declaração. A quantidade de valores decide qual lado recebe qual, em sentido horário a partir do topo:

Declaração	Topo	Direita	Base	Esquerda
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Dois valores significam "vertical, horizontal". Três valores significam "topo, horizontal, base". Quatro dão a volta no relógio: topo, direita, base, esquerda (em inglês, o macete é TRouBLe: top, right, bottom, left).

Digite qualquer shorthand abaixo. A caixa é redesenhada e o navegador informa o que cada lado recebeu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente 8px, 8px 24px, 0 0 40px e 1em 5%. Um valor inválido, como -10px, é ignorado e a caixa mantém o último padding válido.

Um lado de cada vez

Cada lado tem a própria propriedade, o que fica mais claro que um shorthand de quatro valores quando você só quer mudar um:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Um shorthand seguido de um lado é um padrão comum: defina tudo e depois ajuste um lado.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Aqui a ordem importa: um shorthand padding escrito depois de padding-bottom voltaria a base para 16px.

Padding lógico: padding-inline e padding-block

padding-left e padding-right são físicos: ficam do mesmo lado em qualquer idioma. As propriedades lógicas seguem a direção da escrita, que é o que você quer em um site que também é exibido da direita para a esquerda:

Propriedade lógica	Em português (esquerda para direita)	Em árabe (direita para esquerda)
`padding-inline-start`	esquerda	direita
`padding-inline-end`	direita	esquerda
`padding-inline`	esquerda e direita	direita e esquerda
`padding-block`	topo e base	topo e base

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

O padding aumenta a caixa (a menos que seja border-box)

Por padrão, width é a largura só do conteúdo, e o padding é somado por cima. Uma caixa width: 200px com padding: 20px tem 240px de largura:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box mantém a caixa em 200px e tira o padding de dentro. A página do box model mostra a conta completa.

Padding em porcentagem

Um padding em porcentagem é medido em relação à largura do pai, nos quatro lados, incluindo topo e base:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

É daí que veio o velho truque "padding-top: 56.25%" para caixas de vídeo 16:9. Hoje aspect-ratio: 16 / 9 faz o mesmo trabalho diretamente.

Padding em botões e links

O padding é o jeito certo de aumentar um link ou botão, porque ele faz parte do elemento e, portanto, do que você pode clicar ou tocar. A margin acrescentaria espaço, mas não um alvo maior.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Valores que o padding aceita

Valor	Exemplo	Observações
Comprimento	`12px`, `1rem`, `0.5em`	`em` acompanha o tamanho da fonte do elemento
Porcentagem	`5%`	Da largura do bloco que o contém
`0`	`padding: 0`	Não precisa de unidade
Negativo	`-10px`	Inválido, ignorado
`auto`	`auto`	Inválido para padding (funciona para margin)

Erros comuns

Ordem errada no shorthand de quatro valores. É topo, direita, base, esquerda, em sentido horário.
Uma caixa que cresce quando você põe padding. Defina box-sizing: border-box.
Usar padding para separar dois elementos. Espaço entre elementos é margin; padding é espaço dentro de um. Veja margin vs padding.
Padding vertical em um link inline que invade outras linhas. Transforme-o em inline-block.
Padding negativo ou padding: auto. Os dois são inválidos e ignorados sem aviso.

Perguntas frequentes

O que é padding no CSS?

Padding é o espaço entre o conteúdo de um elemento e a borda dele. Ele faz parte do elemento, então mostra a cor de fundo do elemento e aumenta a área clicável de um link ou botão.

Em que ordem ficam os valores do shorthand padding?

Em sentido horário a partir do topo: padding: top right bottom left;. Com três valores é topo, esquerda e direita, base; com dois valores, topo e base e depois esquerda e direita; com um valor, os quatro lados.

O padding aumenta o tamanho do elemento?

Com o padrão box-sizing: content-box, sim: o padding é somado a width e height. Com box-sizing: border-box, o padding sai de dentro da largura, então o elemento mantém o tamanho que você definiu.

Um padding em porcentagem é relativo a quê?

À largura do bloco que o contém, nos quatro lados. padding-top: 50% é metade da largura do pai, não da altura, e é por isso que os antigos truques de proporção usavam padding vertical.

O padding pode ser negativo?

Não. Um valor de padding negativo é inválido e a declaração é ignorada. Para puxar o conteúdo para fora, use uma margin negativa.

Como colocar padding no HTML?

Com CSS, em uma folha de estilo ou em um atributo style: <div style="padding: 16px;">. O HTML não tem atributo de padding para elementos em geral; o antigo atributo cellpadding das tabelas está obsoleto e foi substituído por padding em td e th.

Conceitos relacionados