Propriedade de preenchimento CSS
Exemplo
Defina o preenchimento para todos os quatro lados de um elemento <p> para 35 pixels:
p {
padding: 35px;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O preenchimento de um elemento é o espaço entre seu conteúdo e sua borda.
A paddingpropriedade é uma propriedade abreviada para:
Nota: O preenchimento cria espaço extra dentro de um elemento, enquanto a margem cria espaço extra ao redor de um elemento.
Esta propriedade pode ter de um a quatro valores.
Se a propriedade padding tiver quatro valores:
- preenchimento: 10px 5px 15px 20px;
- o preenchimento superior é de 10px
- o preenchimento direito é de 5px
- o preenchimento inferior é de 15px
- preenchimento esquerdo é de 20px
Se a propriedade padding tiver três valores:
- preenchimento: 10px 5px 15px;
- o preenchimento superior é de 10px
- preenchimento direito e esquerdo são 5px
- o preenchimento inferior é de 15px
Se a propriedade padding tiver dois valores:
- preenchimento: 10px 5px;
- o preenchimento superior e inferior são 10px
- preenchimento direito e esquerdo são 5px
Se a propriedade padding tiver um valor:
- preenchimento: 10px;
- todos os quatro preenchimentos são 10px
Nota: Valores negativos não são permitidos.
| Valor padrão: | 0 |
|---|---|
| Herdado: | não |
| Animavel: | sim, consulte propriedades individuais . Leia sobre animáveis |
| Versão: | CSS1 |
| Sintaxe JavaScript: | objeto .style.padding="100px 20px" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintaxe CSS
padding: length|initial|inherit;
Valores de propriedade
| Value | Description | Play it |
|---|---|---|
| length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
| % | Specifies the padding in percent of the width of the containing element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Defina o preenchimento de um elemento <p> para 35 pixels para a parte superior e inferior e para 70 pixels para a direita e a esquerda:
p {
padding: 35px 70px;
}
Exemplo
Defina o preenchimento de um elemento <p> para 35 pixels para a parte superior, 70 pixels para a direita e para a esquerda e 50 pixels para a parte inferior:
p {
padding: 35px 70px 50px;
}
Exemplo
Defina o preenchimento de um elemento <p> para 35 pixels para a parte superior, 70 pixels para a direita, 50 pixels para a parte inferior e 90 pixels para a esquerda:
p {
padding: 35px 70px 50px 90px;
}
Páginas relacionadas
Tutorial de CSS: preenchimento de CSS
Tutorial CSS: Modelo de caixa CSS
Referência HTML DOM: propriedade de preenchimento