Propriedades CSS Padding
As CSS padding propriedades são usadas para gerar o espaço em torno do conteúdo.
As propriedades de preenchimento definir o tamanho do espaço em branco entre o conteúdo do elemento e a borda do elemento.
Este elemento tem um preenchimento de 50px.
Padding CSS
As propriedades CSS preenchimento definir o espaço em branco entre o conteúdo do elemento e da fronteira elemento.
O preenchimento limpa uma área em torno do conteúdo (dentro da fronteira) de um elemento.
 | Nota: O enchimento é afectada pela cor do elemento de fundo! |
|---|
Com CSS, você tem total controle sobre o preenchimento. Há propriedades CSS para definir o preenchimento para cada lado de um elemento (em cima, à direita, inferior e esquerda).
Estofamento - Sides individuais
CSS tem propriedades para especificar o preenchimento de cada um dos lados de um elemento:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Todas as propriedades de preenchimento pode ter os seguintes valores:
- comprimento - especifica um estofamento em px, pt, cm , etc.
- % - Especifica um estofamento em% da largura do elemento contendo
- herdar - especifica que o preenchimento deve ser herdado do elemento pai
O exemplo a seguir define o preenchimento diferente para todos os quatro lados de um <p> elemento:
Exemplo
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
} Tente você mesmo " Estofamento - Propriedade Taquigrafia
Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma propriedade.
O padding propriedade é um atalho para as seguintes propriedades de preenchimento individuais:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Então, aqui está como funciona:
Se o padding propriedade tem quatro valores:
- padding: 25px 50px 75px 100px;
- estofamento superior é 25px
- preenchimento correto é 50px
- preenchimento de fundo é 75px
- padding-left é 100px
Se o padding propriedade tem três valores:
- padding: 25px 50px 75px;
- estofamento superior é 25px
- paddings direita e esquerda são 50px
- preenchimento de fundo é 75px
Se o padding propriedade tem dois valores:
- padding: 25px 50px;
- paddings superior e inferior são 25px
- paddings direita e esquerda são 50px
Se o padding propriedade tem um valor:
- padding: 25px;
- todos os quatro preenchimentos são 25px
mais Exemplos
Todas as propriedades de preenchimento em uma declaração
Este exemplo demonstra uma propriedade estenográfica para especificar todas as propriedades de preenchimento em uma declaração, pode ter de um a quatro valores.
Definir o padding-left
Este exemplo demonstra como definir o padding-left de um <p> elemento.
Defina o preenchimento direito
Este exemplo demonstra como definir o preenchimento direito de um <p> elemento.
Defina o preenchimento superior
Este exemplo demonstra como para definir o estofamento superior de um <p> elemento.
Defina o preenchimento de fundo
Este exemplo demonstra como para definir o estofamento fundo de um <p> elemento.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Todas as propriedades CSS Padding
| Propriedade | Descrição |
|---|---|
| padding | Um atalho para definir todas as propriedades de preenchimento em uma declaração |
| padding-bottom | Define o preenchimento de fundo de um elemento |
| padding-left | Define o preenchimento à esquerda de um elemento |
| padding-right | Define o preenchimento direito de um elemento |
| padding-top | Define o preenchimento superior de um elemento |