A propriedade CSS padding

Publicado em: 12/12/2003

Os espaçamentos nos elementos HTML

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 espaçamentos são as listadas abaixo:

  • padding-top..........define a espaçamento superior;
  • padding-right........define a espaçamento direita;
  • padding-bottom.......define a espaçamento inferior;
  • padding-left.........define a espaçamento esquerda;
  • padding..............maneira abreviada para todas os espaçamentos

Valores válidos para as propriedades de espaçamento

  1. auto: valor default da margem
  2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  3. %: porcentagem da largura do elemento pai

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito dos tutorial.

Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualização.

padding-top — espaçamento superior

<html>
<head>
<style type="text/css">
<!--
p {padding-top: 2cm;}
-->
</style>
</head>
<body>
<p>Um espaçamento superior de 2cm</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Um espaçamento superior de 2cm

padding-right — espaçamento direito

<html>
<head>
<style type="text/css">
<!--
p {padding-right: 300px;}
-->
</style>
</head>
<body>
<p>Um espaçamento direito de 300px nesta
 frase mais longa dentro do parágrafo</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Um espaçamento a direita de 300px nesta frase mais longa dentro do parágrafo

padding-bottom — espaçamento inferior

<html>
<head>
<style type="text/css">
<!--
p {padding-bottom: 2em;}
-->
</style>
</head>
<body>
<p>Um espaçamento inferior de 2.0em</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Um espaçamento inferior de 2.0em

padding-left — espaçamento esquerdo

<html>
<head>
<style type="text/css">
<!--
p {padding-left: 10%;}
-->
</style>
</head>
<body>
<p>Um espaçamento esquerdo de 10%</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Um espaçamento esquerdo de 10%

padding — todos os quatro espaçamentos em declaração única

A propriedade padding permite que você controle o espaçamento entre o conteúdo e as bordas dos elementos HTML.

Não são válidos valores negativos para espaçamento.

Em declaração única a ordem das espaçamentos é: superior, direito, inferior e esquerdo.

Há quatro modos 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....os espaçamentos superior, direito, inferior e esquerdo nesta ordem.
<html>
<head>
<style type="text/css">
<!--
p {padding: 20px 40px 80px 5px;}
-->
</style>
</head>
<body>
<p>Um espaçamento superior de 20px,
 um espaçamento direito de 40px,
um espaçamento inferior de 80px
e um espaçamento esquerdo de 5px</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Um espaçamento superior de 20px, um espaçamento direito de 40px, um espaçamento inferior de 80px e um espaçamento esquerdo de 5px