Propriedade de preenchimento CSS é usado para definir o espaço entre o conteúdo do elemento e a borda do elemento .
É diferente da margem CSS na forma como a margem CSS define o espaço ao redor dos elementos. O preenchimento CSS é afetado pelas cores de fundo. Ele limpa uma área ao redor do conteúdo.
O preenchimento superior, inferior, esquerdo e direito pode ser alterado independentemente usando propriedades separadas. Você também pode alterar todas as propriedades de uma vez usando a propriedade de preenchimento abreviada.
Propriedades de preenchimento CSS
| Propriedade | Descrição |
|---|---|
| preenchimento | É usado para definir todas as propriedades de preenchimento em uma declaração. |
| preenchimento à esquerda | É usado para definir o preenchimento esquerdo de um elemento. |
| preenchimento à direita | É usado para definir o preenchimento direito de um elemento. |
| topo acolchoado | É usado para definir o preenchimento superior de um elemento. |
| fundo de preenchimento | É usado para definir o preenchimento inferior de um elemento. |
Valores de preenchimento CSS
| Valor | Descrição |
|---|---|
| comprimento | É usado para definir preenchimento fixo em pt, px, em etc. |
| % | Ele define o preenchimento em% do elemento que contém. |
Exemplo de preenchimento CSS
p { background-color: pink; } p.padding { padding-top: 50px; padding-right: 100px; padding-bottom: 150px; padding-left: 200px; } <p>This is a paragraph with no specified padding.</p> <p>This is a paragraph with specified paddings.</p> Teste agora Saída:
Este é um parágrafo sem preenchimento especificado.
Este é um parágrafo com preenchimentos especificados.