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 value | as each of the properties of the shorthand: |
|---|---|
| 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:
|
| 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>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
BCD tables only load in the browser