Padding (espaçamento interno)

O espaço entre o conteúdo de um elemento e a borda desse mesmo elemento.

Hard

O que é

Padding é o respiro que existe dentro de um elemento, ou seja, a distância entre o conteúdo e a beirada dele. Pense no espaço entre o texto de um botão e a borda do botão, ou entre o conteúdo de um card e a borda do card. O ponto é que ele mede o espaço interno, e não o espaço entre um elemento e outro.

Apesar de parecer um detalhe, o padding decide muita coisa de uma vez só, porque influencia o tamanho percebido do elemento, o peso visual dele, a legibilidade e até a área de toque. Quando o conteúdo fica colado na borda, tudo parece apertado e cansa o olho antes mesmo de a pessoa entender o porquê, enquanto um padding generoso ajuda a dar importância àquele elemento.

No terreno da acessibilidade, o padding tem um papel especial, porque é ele que estica a área tocável sem precisar mudar o tamanho do ícone. Um ícone de 16px, por exemplo, consegue atingir os 44 por 44 pontos recomendados pra um toque confortável só com padding suficiente em volta.

Em uma frase

Aumenta o padding desse botão pra chegar nos 44 por 44 de área de toque.

A pergunta que ele responde

Qual é a diferença entre o espaço dentro e fora de um elemento, e como eu controlo isso?

Quando usar

Faz sentido em qualquer componente, sempre que você quer garantir legibilidade, dar o peso visual certo e oferecer uma área de toque adequada.

Como não usar

O que atrapalha é cravar valores soltos componente por componente, em vez de seguir uma escala de espaçamento, ou apertar tanto que o conteúdo acaba encostando na borda.

Na prática

Pense num time que aumenta o padding do botão de envio pra ele atingir os 44 por 44 pontos de área tocável. O detalhe é que isso acontece sem mudar o tamanho visual do ícone, só ampliando o respiro ao redor.

Não confunda com

Vale separar padding de margin, porque o padding é o espaço que fica dentro do elemento, entre o conteúdo e a borda, enquanto a margin é o espaço que fica fora dele, entre aquele elemento e o vizinho. São dois espaços diferentes que costumam ser confundidos justamente por andarem juntos.

D

Em inglês

Padding

Pronúncia

pé-ding

Também chamado de

padding, espaçamento interno, respiro interno

Origem

n/a

Fonte

Saiba mais

MDN Web Docs, documentação sobre o box model do CSS