A propriedade CSS padding

visualizações (desde 02/06/2016) Publicado em: 12/12/2003 — Atualizado em: ➠ 02/06/2016

Definindo espaçamentos para os elementos HTML

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

...
<style rel="stylesheet">
  p { padding-top: 2cm; }
</style>
</head>
<body>
  <p>Um espaçamento superior de 2cm</p>
</body>
</html>

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

Um espaçamento superior de 2cm

padding-right

...
<style rel="stylesheet">
  p { padding-right: 80%; }
</style>
</head>
<body>
  <p>Um espaçamento à direita igual a 80% nesta
  frase do parágrafo.</p>
</body>
</html>

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

Um espaçamento à direita igual a 80% nesta frase do parágrafo.

padding-bottom

...
.<style rel="stylesheet">
  .p { padding-bottom: 30mm; }
</style>
</head>
<body>
  <p>Um espaçamento inferior de 30mm</p>
</body>
</html>

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

Um espaçamento inferior de 30mm

padding-left

...
.<style rel="stylesheet">
  .p {padding-left: 5em;}
.</style>
</head>
<body>
  <p>Um espaçamento à esquerda de 5em</p>
</body>
</html>

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

Um espaçamento à esquerda de 5em

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:

  1. padding: valor1......os 4 espaçamentos terão valor1;
  2. padding: valor1 valor2......espaçamento superior e inferior terão valor1 - espaçamento direito e esquerdo terão valor2
  3. padding: valor1 valor2 valor3......espaçamento superior terá valor1 - espaçamento direito e esquerdo terão valor2 - espaçamento inferior terá valor3
  4. padding: valor1 valor2 valor3 valor4....espaçamentos superior, direito, inferior e esquerdo nesta ordem.
...
<style rel="stylesheet">
  .p {padding: 20px 40px 80px 15px;}
</style>
</head>
<body>
<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>
</body>
</html>

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

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

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:

CSS

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.

X

Matérias recomendadas

A sintaxe da regra CSS

Seletores CSS3