A propriedadepadding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top,padding-right,padding-bottom,padding-left).

/* Aplica-se à todas as bordas */padding: 1em;/* vertical | horizontal */padding: 5% 10%;/* superior | horizontal | inferior */padding: 1em 2em 2em;/* superior | direita | inferior | esquerda */padding: 2px 1em 0 1em;/* Valores globais */padding: inherit;padding: initial;padding: unset;

Sintaxe

A propriedadepadding pode ser utilizada usando um, dois, três ou todos os quatro valores. Cada valor é um<comprimento> ou uma<porcentagem>.

• Quandoum único é valor utilizado, ele se aplica a todos osquatro lados.
• SeDois valores forem utilizados o primeiro se aplica às bordas verticais (superior e inferior) e o segundo se aplica às bordas horizontais (esquerda e direita).
• QuandoTrês valores são utilizados o primeiro se aplica à bordasuperior, o segundo será utilizado tanto para a bordaesquerda quanto para a borda direita. O terceiro será aplicado à bordainferior.
• ComQuatro valores a ordem de aplicação é:superior, direita, inferior e esquerda (de acordo com o movimento dos ponteiros do relógio).

Valores

<comprimento>

Media do comprimento. Não pode ser negativo. Veja<length> para maiores detalhes.

<porcentagem>

Valor percentual que é aplicado em relação àlargura do bloco contido.

Sintaxe formal

padding =
<'padding-top'>{1,4}

<padding-top> =
<length-percentage [0,∞]>

<length-percentage> =
<length>|
<percentage>

Exemplos

padding: 5%;/* padding 5% em todos os lados */

padding: 10px;/* padding 10px em todos os lados */

padding: 10px 20px;/*  10px acima e abaixo  *//*  20px esquerda e direita  */

padding: 10px 3% 20px;/*  10px acima          *//*  3% esquerda e direita *//*  20px abaixo       */

padding: 1em 3px 30px 5px;/*  acima    1em  padding  *//*  direita  3px  padding  *//*  abaixo   30px padding  *//*  esquerda 5px  padding  */

border:outset; padding:5% 1em;

Amostra

HTML

<h4>Hello world!</h4><h3>O padding é diferente nesta linha.</h3>

CSS

h4 {  background-color: green;  padding: 50px 20px 20px 50px;}h3 {  background-color: blue;  padding: 400px 50px 50px 400px;}

Especificações

Compatibilidade

Veja também

• CSS Box Model