Padding

A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.

As propriedades para padding podem ser definidas individualmente ou em uma única declaração.

Tratando padding individualmente

Para tratar cada padding individualmente podemos usar:

• padding-top - define o padding superior;
• padding-right - define o padding da direita;
• padding-bottom - define o padding inferior;
• padding-left - define o padding da esquerda.

p {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-right: 150px;
    padding-left: 50px;
}

Forma abreviada de se utilizar as propriedades de Padding

A propriedade padding pode ter de um a quatro valores

• padding: 25px 50px 75px 100px;

  • padding superior tem 25px
  • padding da direita tem 50px
  • padding inferior tem 75px
  • padding da esquerda tem 100px

• padding: 25px 50px 75px;

  • padding superior tem 25px
  • padding da direita e esquerda tem 50px
  • padding inferior 75px

• padding: 25px 50px;

  • padding superior e inferior tem 25px
  • padding direita e esquerda tem 50px

• padding: 25px;

  • todas os paddings tem 25px