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
- auto: valor default da margem
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
- %: porcentagem da largura do elemento pai
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...o 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>Um espaçamento superior de 2cm
padding-right...o 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>Um espaçamento a direita de 300px nesta frase mais longa dentro do parágrafo
padding-bottom...o 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>Um espaçamento inferior de 2.0em
padding-left...o 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>Um espaçamento esquerdo de 10%
padding...todos os quatro espaçamentos em
uma 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:
- 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....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>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
um espaçamento inferior de 80px e um espaçamento esquerdo de 5px
0 comentários:
Postar um comentário
Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).