padding
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 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
Loading…