A propriedade margin

Publicado em: 11/12/2003

As margens nos elementos HTML

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

  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 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>

Este é o efeito da folha de estilo acima:

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>

Este é o efeito da folha de estilo acima:

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>

Este é o efeito da folha de estilo acima:

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>

Este é o efeito da folha de estilo acima:

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:

  1. margin: valor1......as 4 margens terão valor1;
  2. margin: valor1 valor2......margem superior e inferior terão valor1 - margem direita e esquerda terão valor2
  3. margin: valor1 valor2 valor3......margem superior terá valor1 - margem direita e esquerda terão valor2 - margem inferior terá valor3
  4. margin: 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>

Este é o efeito da folha de estilo acima:

Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px