---
title: margin
slug: Web/CSS/margin
tags:
  - CSS
  - CSS Property
  - Reference
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>

<p>A propriedade <strong><code>margin</code></strong> do <a href="/pt-BR/docs/Web/CSS" title="CSS">CSS</a> define a <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">área de margem</a> nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, e {{cssxref("margin-left")}}.</p>

<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>

<p class="hidden">O código fonte para este exemplo interativo está armazenado em um repositório GitHub. Se você desejar contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um <em>pull request</em>.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush:css no-line-numbers">/* Aplica para todos os quatro lados */
margin: 1em;

/* vertical | horizontal */
margin: 5% auto;

/* topo | horizontal | inferior */
margin: 1em auto 2em;

/* topo | direita | inferior | esquerda */
margin: 2px 1em 0 auto;

/* Valores globais */
margin: inherit;
margin: initial;
margin: unset;
</pre>

<p>A propriedade <code>margin</code> pode ser especificada usando um, dois, três ou quatro valores. Cada valor deve ser um <code><a href="#&lt;length>">&lt;length&gt;</a></code>, uma <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>, ou a palavra-chave <code><a href="#auto">auto</a></code>. Cada valor pode ser positivo, zero ou negativo.</p>

<ul>
 <li>Quando <strong>um</strong> valor é especificado, a mesma margem é aplicada para <strong>todos os quatro lados</strong>.</li>
 <li>Quando <strong>dois</strong> valores são especificados, a primeira margem é aplicada aos <strong>lados</strong> <strong>superior e inferior,</strong> e a segunda aos <strong>lados</strong> <strong>esquerdo e direito</strong>.</li>
 <li>Quando <strong>três</strong> valores são especificados, a primeira margem é apliacada ao <strong>topo</strong>, a segunda aos <strong>lados</strong> <strong>esquerdo e direito</strong>, e a terceira ao <strong>lado</strong> <strong>inferior</strong>.</li>
 <li>Quando <strong>quatro</strong> valores são especificados, as margens são aplicadas aos lados <strong>superior</strong>, <strong>direito</strong>, <strong>inferior</strong> e <strong>esquerdo</strong>, nesta ordem (sentido horário).</li>
</ul>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><strong>{{cssxref("length")}}</strong></dt>
 <dd>O tamanho da margem como um valor fixo.</dd>
 <dt>{{cssxref("percentage")}}</dt>
 <dd>O tamanho da margem como um percetual, relativo à <em>largura</em> do bloco em que o elemento está contido.</dd>
 <dt><code>auto</code></dt>
 <dd>O navegador seleciona uma margem adequada para utilizar. Por exemplo, em alguns casos este valor pode ser utilizado para centralizar o elemento.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Exemplo_simples">Exemplo simples</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="center"&gt;Este elemento está centralizado.&lt;/div&gt;

&lt;div class="outside"&gt;Este elemento está posicionado fora de seu bloco recipiente.&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; highlight:[2,8]">.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}</pre>

<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>

<h3 id="Mais_exemplos">Mais exemplos</h3>

<pre class="brush: css">margin: 5%;                 /* todos os lados: margem de 5% */

margin: 10px;               /* todos os lados: margem de 10px */

margin: 1.6em 20px;         /* topo e inferior:    margem de 1.6em */
                            /* esquerda e direita: margem de 20px  */

margin: 10px 3% 1em;        /* topo:               margem de 10px */
                            /* esquerda e direita: margem de 3%   */
                            /* inferior:           margem de 1em  */

margin: 10px 3px 30px 5px;  /* topo:     margem de 10px */
                            /* direita:  margem de 3px  */
                            /* inferior: margem de 30px */
                            /* esquerda: margem de 5px  */

margin: 2em auto;           /* topo e inferior: margem de 2em          */
                            /* caixa está horizontalmente centralizada */

margin: auto;               /* topo e inferior: margem de 0            */
                            /* caixa está horizontalmente centralizada */
</pre>

<h2 id="Notas">Notas</h2>

<h3 id="Centralização_horizontal">Centralização horizontal</h3>

<p>Para centralizar algo horizontalmente em navegadores modernos, você pode utilizar <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code></p>

<p>Contudo, em navegadores antigos, como IE8-9 que não suporta layout flexbox, estes não estão disponíveis. Para centralizar um elemento dentro de seu pai, use <code>margin: 0 auto;</code> .</p>

<h3 id="Colapso_de_margens">Colapso de margens</h3>

<p>Às vezes, as margens superior e inferior de elementos são colapsadas em uma única margem que é igual à maior das duas margens. Veja <a href="/pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing">Dominando margin collapsing</a> para mais informações.</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>Nenhuma mudança significativa.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Define <code>margin</code> como animável.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Remove seu efeito em elementos <em>inline</em>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>

<div class="hidden">A tabela de compatibildade nesta página é gerada de um dados estruturados. Se você desejar contribuir com estes dados, por favor, faça <em>check out</em> do <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</div>

<p>{{Compat("css.properties.margin")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
 <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Margin collapsing</a></li>
</ul>