A propriedade CSS margin

Introdução

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

<p>
  Uma margem superior de 2cm
</p>

p { margin-top: 2cm; }

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

margin-right

<p>
  Uma margem direita igual a 80% nesta frase do parágrafo.
</p>

p { margin-right: 80%; }

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

margin-bottom

<p>
  Uma margem inferior de 30mm
</p>

.p { margin-bottom: 30mm; }

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

margin-left

<p>
  Uma margem esquerda de 5em
</p>

.p {margin-left: 5em;}

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

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:

• margin: valor1
  as 4 margens terão valor1;
• margin: valor1 valor2;
  margem superior e inferior terão valor1 - margem direita e esquerda terão valor2
• margin: valor1 valor2 valor3;
  margem superior terá valor1 - margem direita e esquerda terão valor2 - margem inferior terá valor3
• margin: valor1 valor2 valor3 valor4;
  margens superior, direita, inferior e esquerda nesta ordem.

<p>
  Uma margem superior de 20px, uma margem direita de 40px,
  uma margem inferior de 80px e uma margem esquerda de 15px
</p>

.p {margin: 20px 40px 80px 15px;}

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

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

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

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.

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:

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

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.

Compartilhe essa matéria com seus amigos