Propriedade CSS Padding

A propriedade CSS padding cria espaço dentro de um elemento, entre o seu conteúdo e a sua borda. Ao contrário do margin — que empurra espaço para fora da borda, entre elementos vizinhos — o padding faz parte do próprio elemento: ele compartilha o background do elemento e está incluído na área de clique/hover.

Esta página aborda as quatro propriedades de padding individuais, a abreviação padding e todas as suas formas de valor (de um a quatro valores), as unidades e porcentagens que você pode usar, e as armadilhas (porcentagens, box-sizing, e por que o padding nunca colapsa da forma que as margens colapsam).

Os lados individuais

Com a ajuda das seguintes propriedades você pode definir o padding para cada lado de um elemento:

Como você pode imaginar, para o topo usamos padding-top, para a parte inferior padding-bottom, para o lado esquerdo padding-left e para o direito padding-right.

Todas as propriedades de padding aceitam os seguintes valores:

length — um tamanho fixo em px, em, rem, pt, cm, etc. (por exemplo padding-top: 16px).
porcentagem (%) — um padding relativo à largura do bloco contenedor. Atenção ao detalhe: um padding percentual vertical (top/bottom) também é calculado a partir da largura do contêiner, e não da sua altura. É isso que faz o clássico truque de "padding-bottom em porcentagem" para caixas de proporção de aspecto funcionar.
inherit — herda o padding calculado do elemento pai.

Algumas regras que vale a pena lembrar:

O padding não pode ser negativo. Se você precisar puxar o conteúdo para o outro lado, isso é trabalho para margin ou transform.
O valor padrão de toda propriedade de padding é 0.
O padding não colapsa. Margens verticais adjacentes podem se fundir em uma (colapso de margens), mas dois paddings sempre se somam — portanto, elementos empilhados mantêm ambos os paddings.
Por padrão, o padding é adicionado por cima do width/height declarado. Uma caixa com 200px de largura e padding: 20px renderiza com 240px de largura. Defina box-sizing: border-box para fazer o padding caber dentro da largura declarada.

Exemplo das propriedades de padding individuais:

Exemplo de uso das propriedades de padding individuais:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </body>
</html>

Experimente Você Mesmo »

Padding como propriedade abreviada

A propriedade CSS padding é uma abreviação das quatro propriedades individuais:

A quantidade de valores passados altera como eles são mapeados nos quatro lados:

Valores	`padding: …`	Top	Right	Bottom	Left
1	`35px`	35px	35px	35px	35px
2	`20px 40px`	20px	40px	20px	40px
3	`20px 15px 35px`	20px	15px	35px	15px
4	`25px 50px 75px 100px`	25px	50px	75px	100px

A ordem de quatro valores é no sentido horário a partir do topo: top, right, bottom, left. Com dois ou três valores, os lados ausentes espelham o lado oposto.

Quando a propriedade padding tem apenas 1 valor, por exemplo padding: 35px, todos os quatro paddings são 35px.

Exemplo da propriedade abreviada padding com um valor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Padding shorthand with one value</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Experimente Você Mesmo »

A propriedade padding pode ter 2 valores, por exemplo padding: 20px 40px, onde os paddings superior e inferior são 20px, e os paddings direito e esquerdo são 40px.

Exemplo de CSS padding com 2 números

p {
  padding: 20px 40px;
}

Isso é equivalente ao código acima.

Exemplo de CSS padding com 2 números, forma extensa

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

Exemplo da propriedade abreviada padding com dois valores:

Exemplo de código CSS padding

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

A propriedade padding pode ter 3 valores, por exemplo, padding: 20px 15px 35px;, onde o padding superior é 20px, os paddings direito e esquerdo são 15px e o padding inferior é 35px.

Exemplo de CSS padding com 3 números

p {
  padding: 20px 15px 35px;
}

Isso é equivalente ao código acima.

Exemplo de CSS padding com 3 números, forma extensa

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

Exemplo da propriedade abreviada padding com três valores:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Experimente Você Mesmo »

E por fim, a propriedade padding pode ter quatro valores, por exemplo padding: 25px 50px 75px 100px;, onde o padding superior é 25px, o padding direito é 50px, o padding inferior é 75px e o padding esquerdo é 100px.

Exemplo de CSS com o mesmo padding

p {
  padding: 25px 50px 75px 100px;
}

Exemplo da propriedade abreviada padding com quatro valores:

Exemplo da propriedade abreviada padding com quatro valores (top, right, bottom, left — sentido horário):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Padding vs. margin

Padding e margin são fáceis de confundir. Use padding quando quiser espaço para respirar dentro de uma caixa — entre o texto e sua borda ou background. Use margin quando quiser espaço entre uma caixa e os elementos ao redor dela.

Principais diferenças práticas:

O padding compartilha a cor de background do elemento; a margin é sempre transparente.
O padding faz parte da área clicável do elemento (útil para botões e links); a margin não.
As margens podem colapsar entre irmãos; os paddings nunca colapsam.

Tópicos relacionados

CSS margin — o equivalente do padding fora da borda.
CSS box-sizing — controla se o padding é adicionado ou cabe dentro da width do elemento.
padding-top, padding-right, padding-bottom, padding-left — as propriedades individuais detalhadas.

Prática

O que descreve corretamente a propriedade 'padding' em CSS?

A propriedade padding cria espaço extra dentro do elemento apenas.A propriedade padding adiciona espaço extra ao redor do conteúdo do elemento, fora de qualquer borda definida.O padding é uma propriedade abreviada para definir padding-top, padding-right, padding-bottom e padding-left em uma única declaração.A propriedade padding altera a cor de background de um elemento.A propriedade padding atribui uma textura ao elemento.