initial commit

1 files changed, 172 insertions, 0 deletions

diff --git a/files/pt-br/web/css/margin/index.html b/files/pt-br/web/css/margin/index.html
new file mode 100644
index 0000000000..037d22b5b0
--- /dev/null
+++ b/files/pt-br/web/css/margin/index.html
@@ -0,0 +1,172 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/margin
+---
+<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>