MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

padding

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade padding 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;

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter.
Inheritednão
Percentagesrefer to the width of the containing block
Midiavisual
Computed valueas each of the properties of the shorthand:
  • padding-bottom: the percentage as specified or the absolute length
  • padding-left: the percentage as specified or the absolute length
  • padding-right: the percentage as specified or the absolute length
  • padding-top: the percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

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

  • Quando um único é valor utilizado, ele se aplica a todos os quatro lados.
  • Se Dois valores forem utilizados o primeiro se aplica às bordas verticais (superior e inferior) e o segundo se aplica às bordas horizontais (esquerda e direita).
  • Quando Três valores são utilizados o primeiro se aplica à borda superior, o segundo será utilizado tanto para a borda esquerda quanto para a borda direita. O terceiro será aplicado à borda inferior.
  • Com Quatro 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

[ <length> | <percentage> ]{1,4}

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;
}

Amostra

Especificações

Especificação Status Observações
CSS Basic Box Model
The definition of 'padding' in that specification.
Rascunho atual Sem alteração
CSS Level 2 (Revision 1)
The definition of 'padding' in that specification.
Recomendação Sem alteração
CSS Level 1
The definition of 'padding' in that specification.
Recomendação Definição inicial

Compatibilidade

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (Yes) 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: aantonello
 Última atualização por: aantonello,