Banner propaganda da DevMedia - Cursos de desenvolvimento web

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo