A propriedade CSS margin

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

Definindo margens para os elementos HTML

As propriedades para as margens, definem a dimensão de cada uma das quatro margens de um elemento HTML e são as listadas a seguir:

 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 
                  definir todas as 4 margens.

Valores válidos para as propriedades da margem

  • auto: margens laterais iguais (para centrar na horizontal elementos nível de bloco)
  • comprimento: um valor CSS para comprimento (px, em, pt, etc)
  • porcentagem: um valor expressso em porcentagem;

É válido declarar valores negativos para margem, com o objetivo de sobrepor elementos.

margin-top

...
<style rel="stylesheet">
  p { margin-top: 2cm; }
</style>
</head>
<body>
  <p>Uma margem superior de 2cm</p>
</body>
</html>

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

Uma margem superior de 2cm

margin-right

...
<style rel="stylesheet">
  p { margin-right: 80%; }
</style>
</head>
<body>
  <p>Uma margem direita igual a 80% nesta
  frase do parágrafo.</p>
</body>
</html>

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

Uma margem direita igual a 80% nesta frase do parágrafo.

margin-bottom

...
.<style rel="stylesheet">
  .p { margin-bottom: 30mm; }
</style>
</head>
<body>
  <p>Uma margem inferior de 30mm</p>
</body>
</html>

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

Uma margem inferior de 30mm

margin-left

...
.<style rel="stylesheet">
  .p {margin-left: 5em;}
.</style>
</head>
<body>
  <p>Uma margem esquerda de 5em</p>
</body>
</html>

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

Uma margem esquerda de 5em

margin

A propriedade da margin é a maneira abreviada de se declarar as 4 margens. A ordem de declaração das margens é: superior, direita, inferior e esquerda.

Há quatro maneiras 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.
...
<style rel="stylesheet">
  .p {margin: 20px 40px 80px 15px;}
</style>
</head>
<body>
<p>Uma margem superior de 20px, uma margem direita de 40px,
uma margem inferior de 80px e uma margem esquerda de 15px</p>
</body>
</html>

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

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

Sobreposição de margens verticais

É preciso que o autor entenda o algoritmo de cálculo das CSS para determinar a margem vertical resultante entre dois boxes. A margem resultante é obtida por sobreposição também conhecida como "collapsing margins" (sobreposição de margens)

Nota: Margens horizontais nunca se sobrepõem.

Observe a marcação HTML e as regras CSS para dois boxes

HTML

<div class="um">1</div>
<div class="um">2</div> 

CSS

div.um {
 width: 100%;
 background: lightblue;
 margin-bottom:40px;
 }
div.dois {
 width: 100%;
 background: lightcoral;
 margin-top:50px;
 } 
 

A soma da margem inferior do primeiro DIV com a margem superior do segundo DIV é: 40px + 50px = 90px. Contudo a margem vertical resultante entre os DIV não será 90px, pois as CSS, segundo a sobreposição de margens, consideram a margem resultante como sendo a maior entre as duas, ou seja, 50px.

Observe a seguir a renderização deste exemplo.

1
2

Margens negativas

A sobreposição de margens verticais, ou margem vertical resultante, quando uma delas ou ambas são negativas se dá conforme descrito a seguir:

  • uma negativa e outra positiva: a margem resultante é a soma algébrica das duas margens;
  • ambas as margens negativas: a margem resultante é a de maior valor absoluto ("a mais negativa");

Sobreposição de margens verticais com elemento-filho

Vamos examinar esta sobreposição com uso de um exemplo: Considere um container header para marcar o topo do site e dentro deste container um elemento h1 (seu primeiro filho) para marcar o logo ou o nome do site e a seguir outros elementos-filhos e a folha de estilos conforme mostrado a seguir:

HTML

<header>
  <h1>Nome do site</h1>
  <p>Descrição do site</p>
</header>

CSS

body { margin:0; }
header {
  /* padding-top:1px; */
  /* border-top: 1px solid; */
  /* float:left; */
  /* display:inline-block; */
  width:100%;
  height:150px;
  margin:0;
  background: beige;
}
h1 {
  margin:0;
  margin-top:30px;
  border:2px solid black;
}
p {
  margin:0;
  margin-top:10px;
  border:2px solid brown;
}

Notar que as margens dos elementos body e header foram zeradas pois a intenção do autor é que o topo do site (header) "cole" no topo da janela do navegador (body).

Mas isso não acontece, pois na renderização aparece um espaço (margem) entre o topo do site e o topo da janela do navegador conforme mostrado na Pen adiante.

Observe que foi definida uma margem superior de 30px para o elemento h1 (primeiro filho de header) e o espaço que aparece na renderização é de 30px. É como se a margem superior de h1 "transbordasse" para fora do container header.

Isso acontece porque a sobreposição de margens ocorre também com as margens verticais dos containeres e as margens superior do seu primeiro filho e inferior do seu último filho, ou seja, a margem superior resultante considera a margem superior do container e a margem superior do seu primeiro filho e isso ocorre de modo semelhante com a margem inferior do container para o qual é considerada a sobreposição com a margem inferior do seu último filho.

O critério para determinar a margem resultante nestes casos é o mesmo explicado anteriormente. Note que, no nosso exemplo, sendo 0 (zero) a margem superior do container, a margem superior resultante será a margem superior do elemento h1.

Confuso? Não se preocupe criei uma Pen para você editar, fazer experiências e constatar na prática como funciona esta sobreposiçao de margens, mas antes disso uma observação:

Para "corrigir" a sobreposição das margens no caso de container com elemento-filho existem alguns "hacks". Quatro deles foram comentados na folha de estilos. Descomente uma de cada vez, observe o resultado e use aquele que melhor se adapta ao seu caso. Como indicação geral o "hack" do padding-top: 1px ou padding-bottom: 1px resolve a contento a maioria dos casos.

Consulte e edite a Pen a seguir para consolidar seu aprendizado.

See the Pen Collapsing margins by Maujor (@Maujor) on CodePen.