padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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).

css
/* 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 and ::first-line.
Inheritednão
Percentagesrefer to the width of the containing block
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

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

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

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

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

Exemplos

css
padding: 5%;
/* padding 5% em todos os lados */
css
padding: 10px;
/* padding 10px em todos os lados */
css
padding: 10px 20px;
/*  10px acima e abaixo  */
/*  20px esquerda e direita  */
css
padding: 10px 3% 20px;
/*  10px acima          */
/*  3% esquerda e direita */
/*  20px abaixo       */
css
padding: 1em 3px 30px 5px;
/*  acima    1em  padding  */
/*  direita  3px  padding  */
/*  abaixo   30px padding  */
/*  esquerda 5px  padding  */

border:outset; padding:5% 1em;

Amostra

HTML

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

CSS

css
h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

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

Especificações

Specification
CSS Box Model Module Level 3
# padding-shorthand

Compatibilidade

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
padding

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também