Padding

Padding

A propriedade padding é usada para criar espaço em torno do conteúdo de elementos, dentro de qualquer borda definida.

Com CSS temos controle total sobre o preenchimento. Existem propriedades para definir o preenchimento em cada lado de um elemento.

Padding - Lados Individuais

CSS tem propriedades para especificar o preenchimento para cada lado de um elemento:

• padding-top
• padding-right
• padding-bottom
• padding-left

Todas as propriedades padding podem ter os seguintes valores:

• length - especifica o preenchimento em px, pt, cm, em, etc.
• % - especifica o preenchimento em % de largura do elemento
• inherit - especifica que o preenchimento deve ser herdado do pai do elemento

O exemplo a seguir define diferentes paddings para todos os lados de um elemento <div>:

              div {
                padding-top: 50px;
                padding-bottom: 30px;
                padding-right: 50px;
                padding-left: 80px;
              }
            

Propriedade Abreviada

Para diminuir o código, é possível especificar todos os paddings em uma propriedade.

Funciona assim:

Se a propriedade padding tiver quatro valores:

• padding: 25px 50px 75px 100px;
  • preenchimento superior é 25px
  • preenchimento direito é 50px
  • preenchimento inferior é 75px
  • preenchimento esquerdo é 100px

              div {
                padding: 25px 50px 75px 100px;
              }
            

Se a propriedade padding tiver três valores:

• padding: 25px 50px 75px;
  • preenchimento superior é 25px
  • preenchimentos direito e esquerdo são 50px
  • preenchimento inferior é 75px

              div {
                padding: 25px 50px 75px;
              }
            

Se a propriedade padding tiver dois valores:

• padding: 25px 50px;
  • preenchimentos superior e inferior são 25px
  • preenchimentos direito e esquerdo são 50px

              div {
                padding: 25px 50px;
              }
            

Se a propriedade padding tiver um valor:

• padding: 25px;
  • todas as margens são 25px

              div {
                padding: 25px;
              }