A propriedade CSS padding

Introdução

A propriedade padding se destina a criar um espaçamento interno em um um box entre seus 4 lados e a área de conteúdo do box.

As propriedades para declarar padding, definem a dimensão de cada uma dos quatro espaçamentos entre a área das bordas e a área de conteúdo de um elemento HTML e são as listadas a seguir:

padding-top.......define o espaçamento superior;
padding-right.....define o espaçamento à direita;
padding-bottom....define o espaçamento inferior;
padding-left......define o espaçamento à esquerda;
padding...........maneira abreviada para 
                  definir todos os 4 espaçamentos.

Valores válidos para as propriedades padding

• comprimento: um valor CSS para comprimento (px, em, pt, etc)
• porcentagem: um valor expressso em porcentagem;

Valores declarados com uso de porcentagem são calculados, para os quatro lados do box, tomando-se a porcentagem em relação à largura (width) do box.

Não é válido declarar valores negativos para padding.

padding-top

<p>
  Um espaçamento superior de 2cm
</p>

p { padding-top: 2cm; }

A renderização do código acima é conforme mostrado a seguir:

padding-right

<p>
  Um espaçamento à direita igual a 80% neste parágrafo.
</p>

p { padding-right: 80%; }

A renderização do código acima é conforme mostrado a seguir:

padding-bottom

<p>
  Um espaçamento inferior de 30mm
</p>

.p { padding-bottom: 30mm; }

A renderização do código acima é conforme mostrado a seguir:

padding-left

<p>
  Um espaçamento à esquerda de 5em
</p>

.p {padding-left: 5em;}

A renderização do código acima é conforme mostrado a seguir:

padding

A propriedade padding é a maneira abreviada de se declarar os 4 espaçamentos. A ordem de declaração dos espaçamentos é: superior, direito, inferior e esquerdo.

Há quatro maneiras de se declarar abreviadamente os espaçamentos:

padding: valor1;
  os 4 espaçamentos terão valor1
padding: valor1 valor2;
  espaçamento superior e inferior terão valor1
  espaçamento direito e esquerdo terão valor2
padding: valor1 valor2 valor3;
  espaçamento superior terá valor1
  espaçamento direito e esquerdo terão valor2 
  espaçamento inferior terá valor3
padding: valor1 valor2 valor3 valor4;
  espaçamentos superior, direito, inferior e esquerdo nesta ordem.

<p>
  Um espaçamento superior de 20px, um espaçamento à direita de 40px,
  um espaçamento inferior de 80px e um espaçamento à esquerda de 15px
</p>

.p {padding: 20px 40px 80px 15px;}

A renderização do código acima é conforme mostrado a seguir:

Boxes responsivos

Dissemos que valores de padding declarados com uso de porcentagem são calculados, para os quatro lados do box, tomando-se a porcentagem em relação à largura (width) do box. Este comportamento possibilita a criação de boxes responsivos, pois uma vez que a declaração de altura (height) em porcentagem é praticamente inviável mesmos em layouts simples (ver o tutorial Porque height 100% não funciona?) podemos declarar padding em porcentagem para criar um box responsivo com razão de aspecto constante.

Considere que você pretende inserir um vídeo do Youtube em uma página responsiva. Já descobriu que vídeos do Youtube têm uma razão de aspecto (largura/altura) igual a 16:9. Isso significa que a altura é igual a 9/16 da largura ou seja 0,5625 = 56,25%. Assim, a regra CSS para criar um box responsivo com razão de aspecto 16:9 é conforme mostrada a seguir:

div {
  width: 100%;
  padding-bottom: 56.25%;
  background: brown;

A renderização do código acima é conforme mostrado a seguir:

Redimensione a janela do navegador para visualizar o box responsivo.

Compartilhe essa matéria com seus amigos