A propriedade para margens, define um valor para espessura das margens dos elementos HTML.
As propriedades para margens são as listadas abaixo:
- margin-top..........define a margem superior;
- margin-right........define a margem direita;
- margin-bottom.......define a margem inferior;
- margin-left.........define a margem esquerda;
- margin..............maneira abreviada para todas
as margens
Valores válidos para a propriedade margin
- 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 válidas 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 do tutorial.
Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualização.
margin-top...a margem superior
<html>
<head>
<style type="text/css">
<!--
p {margin-top: 2cm;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 2cm</p>
</body>
</html>Uma margem superior de 2cm
margin-right...a margem direita
<html>
<head>
<style type="text/css">
<!--
p {margin-right: 300px;}
-->
</style>
</head>
<body>
<p>Uma margem direita de 300px nesta
frase mais longa dentro do parágrafo</p>
</body>
</html>Uma margem direita de 300px nesta frase mais longa dentro do parágrafo
margin-bottom...a margem inferior
<html>
<head>
<style type="text/css">
<!--
p {margin-bottom: 2em;}
-->
</style>
</head>
<body>
<p>Uma margem inferior de 2.0em</p>
</body>
</html>Uma margem inferior de 2.0em
margin-left...a margem esquerda
<html>
<head>
<style type="text/css">
<!--
p {margin-left: 10%;}
-->
</style>
</head>
<body>
<p>Uma margem esquerda de 10%</p>
</body>
</html>Uma margem esquerda de 10%
margin...todas as quatro margens em uma declaração
única
A propriedade da margin permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o
objetivo de sobrepor elementos.
Em declaração única a ordem das margens é: superior, direita, inferior
e esquerda.
Há quatro modos de se declarar abreviadamente as margens:
margin: valor1......as 4 margens terão valor1;margin: valor1 valor2......margem superior e inferior terão valor1
- margem direita e esquerda terão valor2margin: valor1 valor2 valor3......margem superior terá valor1 -
margem direita e esquerda terão valor2 - margem inferior terá
valor3margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior
e esquerda nesta ordem.
<html>
<head>
<style type="text/css">
<!--
p {margin: 20px 40px 80px 5px;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 20px, uma margem direita de 40px,
uma margem inferior de 80px e uma margem esquerda de 5px</p>
</body>
</html>Uma margem superior de 20px, uma margem direita de 40px,
uma margem inferior de 80px e uma margem esquerda de 5px
uma margem inferior de 80px e uma margem esquerda 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).