Propriedade CSS padding
Aprenda como a propriedade CSS padding adiciona espaço dentro da borda de um elemento. Abrange sintaxe abreviada, regras de um a quatro valores, percentagens e detalhes.
A propriedade padding adiciona espaço entre o conteúdo de um elemento e sua borda. Ao contrário da margin, que afasta os elementos entre si pelo exterior, o padding atua por dentro — ele amplia a área clicável ou visível do elemento, mantendo a borda no lugar.
Os valores de padding são definidos usando comprimentos ou percentagens, e são sempre não negativos.
Valores negativos não são permitidos para padding. Use uma margin negativa se precisar puxar o conteúdo para dentro.
padding é uma propriedade abreviada que define os quatro lados de uma vez. Você também pode controlar cada lado individualmente:
Como o padding se encaixa no modelo de caixa
Todo elemento HTML é envolvido pelo modelo de caixa CSS: conteúdo → padding → borda → margin, de dentro para fora. O padding fica entre a área de conteúdo e a borda, portanto faz parte da região de fundo do elemento.
Quando você define box-sizing: border-box (o padrão moderno na maioria dos resets), o padding está incluído na width e height declaradas. Com o legado box-sizing: content-box, o padding é adicionado além dessas dimensões. Veja box-sizing para mais detalhes.
Referência da propriedade
| Valor inicial | 0 |
| Aplica-se a | Todos os elementos exceto table-row-group, table-header-group, table-footer-group, table-row, table-column-group e table-column. Também se aplica a ::first-letter. |
| Herdada | Não |
| Animável | Sim |
| Versão | CSS1 |
| Sintaxe DOM | element.style.padding = "30px" |
Sintaxe
padding: <length> | <percentage> | initial | inherit;Regra de um a quatro valores
A propriedade abreviada aceita um, dois, três ou quatro valores separados por espaço. O mapeamento segue a ordem horária: superior → direita → inferior → esquerda.
| Valores fornecidos | Superior | Direita | Inferior | Esquerda |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
Uma dica útil: valores ausentes espelham o lado oposto (esquerda espelha direita; inferior espelha superior).
Exemplos
Quatro valores (superior / direita / inferior / esquerda)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>O parágrafo recebe 15 px no topo, 30 px à direita, 20 px na parte inferior e 40 px à esquerda.
Valores em percentagem
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Os valores de padding em percentagem — incluindo padding-top e padding-bottom — são sempre calculados em relação à largura do bloco contentor, não à sua altura. Isso facilita a criação de caixas com proporção de aspeto: um bloco com padding-top: 56.25% mantém uma proporção 16:9 independentemente da sua largura.
Dois valores (vertical / horizontal)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px define 20 px no topo e na parte inferior, 40 px à esquerda e à direita — uma forma compacta de aplicar espaçamento simétrico.
Valores
| Valor | Descrição |
|---|---|
length | Um tamanho fixo em qualquer unidade de comprimento CSS: px, em, rem, pt, cm, etc. O padrão é 0. |
% | Uma percentagem da largura do bloco contentor (aplica-se a todos os quatro lados). |
initial | Redefine a propriedade para seu valor padrão (0). |
inherit | Herda o valor calculado do elemento pai. |
Propriedades lógicas (sensíveis ao modo de escrita)
Para layouts internacionalizados que suportam texto vertical ou da direita para a esquerda, os lados físicos padding-top/right/bottom/left podem parecer inadequados. CSS fornece propriedades lógicas que respeitam a direção de escrita:
| Propriedade lógica | Corresponde a em LTR horizontal |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
Os equivalentes abreviados são padding-block e padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;Eles são suportados em todos os navegadores modernos e são preferidos em bibliotecas de componentes que suportam texto bidirecional.
Casos de uso comuns e detalhes importantes
Área clicável. Como o padding faz parte da região de fundo e de captura de eventos do elemento, aumentá-lo em um botão ou link torna o alvo mais fácil de tocar — uma vantagem direta para a usabilidade em dispositivos móveis.
Padding em elementos inline. O padding horizontal em elementos inline (como <span>) funciona como esperado. O padding vertical é aplicado visualmente, mas não afasta as linhas vizinhas; use um elemento block ou inline-block se precisar de ritmo vertical.
Padding vs. margin. Use padding quando quiser que a cor de fundo ou a borda cubra o espaço extra. Use margin quando o espaço deve ser transparente e estar fora da borda.
Interação com box-sizing. Com content-box, adicionar padding torna o elemento visualmente maior. Com border-box, o padding é absorvido dentro da largura declarada, tornando o layout mais previsível. Veja box-sizing.
Tabelas. A propriedade abreviada padding não tem efeito em linhas de tabela ou grupos de colunas. Use padding nas células <td> e <th>, ou use border-spacing para espaços entre células.