padding
=======

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 value | as each of the properties of the shorthand:* `padding-bottom` (en-US): `0`
* `padding-left`: `0`
* `padding-right` (en-US): `0`
* `padding-top` (en-US): `0`
 |
| Aplica-se a | all 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`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:* `padding-bottom` (en-US): the percentage as specified or the absolute length
* `padding-left`: the percentage as specified or the absolute length
* `padding-right` (en-US): the percentage as specified or the absolute length
* `padding-top` (en-US): the percentage as specified or the absolute length
 |
| Animation type | a 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>` (en-US) para maiores detalhes.

`<porcentagem>`

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

### Sintaxe formal
```

padding =   
  <'padding-top'>{1,4} (en-US)    
  
```

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* CSS Box Model