From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001
From: Florian Merz <me@fiji-flo.de>
Date: Thu, 11 Feb 2021 14:49:58 +0100
Subject: unslug pt-br: move

---
 .../mastering_margin_collapsing/index.html         | 74 ++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html

(limited to 'files/pt-br/web/css/css_box_model/mastering_margin_collapsing')

diff --git a/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..cb658d4131
--- /dev/null
+++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,74 @@
+---
+title: Dominando margin collapsing
+slug: Web/CSS/CSS_Box_Model/margin_collapsing
+tags:
+  - CSS
+  - CSS Box Model
+  - Guía
+  - Intermediario(2)
+  - Referencia
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div dir="ltr">{{CSSRef}}</div>
+
+<div dir="ltr">As margens <a href="/pt-BR/docs/Web/CSS/margin-top">superior</a> e <a href="/en-US/docs/Web/CSS/margin-bottom">inferior</a> dos blocos às vezes são combinadas(colapsadas/reduzidas) para uma única margem cujo o tamanho é a maior das margens (se os elementos tiverem a mesma margem, uma delas não será somada), combinado a ele, um comportamento conhecido como <strong>margin collapsing</strong>. Note que as margens de<a href="/pt-BR/docs/Web/CSS/float"> elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</div>
+
+<div dir="ltr"> </div>
+
+<p dir="ltr">Margin collapsing ocorre em três casos básicos:</p>
+
+<dl>
+ <dt dir="ltr">Irmãos adjacentes</dt>
+ <dd dir="ltr">As margens de irmãos adjacentes são colapsadas (execeto quando  o último irmão precisar ser <a href="/en-US/docs/Web/CSS/clear">limpado</a> devido ao uso de floats  em elementos anteriores ). Por exemplo:</dd>
+ <dd>
+ <pre class="brush: html"> &lt;p&gt;A margem inferior deste parágrafo é colapsada...&lt;/p&gt;
+ &lt;p&gt;... com margem superior deste parágrafo.&lt;/p&gt;
+</pre>
+ </dd>
+ <dt dir="ltr">Pai e primeiro/último filho</dt>
+ <dd dir="ltr">Se não houver border, padding, parte inline, <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formatação de bloco</a> criado ou <a href="/en-US/docs/Web/CSS/clear">livre</a> para separar o {{cssxref("margin-top")}} de um bloco do {{cssxref("margin-top")}} do seu primeiro bloco filho, ou nenhum border, padding, conteúdo inline, {{cssxref("height")}}, {{cssxref("min-height")}}, ou {{cssxref("max-height")}} para separar o  {{cssxref("margin-bottom")}} de um bloco do {{cssxref("margin-bottom")}} do seu último filho, então essas margens colapsam. A margem colapsada acaba fora do pai.</dd>
+ <dd dir="ltr"> </dd>
+</dl>
+
+<dl>
+ <dt dir="ltr">Blocos vázios</dt>
+ <dd dir="ltr">Se não houver border, padding, conteúdo inline, {{cssxref("height")}}, ou  {{cssxref("min-height")}} para separar um bloco {{cssxref("margin-top")}} de sua {{cssxref("margin-bottom")}}, então as margens superior e inferior são colapsadas.</dd>
+ <dd dir="ltr"> </dd>
+</dl>
+
+<p dir="ltr">Algumas coisas podem ser observadas:</p>
+
+<ul dir="ltr">
+ <li>Margin collapsing mais complexo (de mais de duas margens) ocorrem quando esses casos são combinados.</li>
+ <li>Essas regras se aplicam até mesmo a margens que são zero, portanto a margem e um primeiro/último filho termina fora de seu pai(de acordo com as regras acima) sendo a margem do pai zero ou não.</li>
+ <li>Quando margens negativas são envolvidas, o tamanho da margem colapsada é a soma da maior margem positiva e da menor margem negativa(a mais negativa).</li>
+ <li>Se ambos são negativos, o valor negativo maior será usado. Essa definição se aplica a elementos adjacentes e a elementos aninhados. </li>
+</ul>
+
+<p dir="ltr">Margens de <a href="/pt-BR/docs/Web/CSS/float">elementos flutuantes</a> e <a href="/pt-BR/docs/Web/CSS/position#Absolute_positioning">posicionados de forma absoluta</a> nunca colapsam.</p>
+
+<h2 dir="ltr" id="Especificações">Especificações</h2>
+
+<table class="standard-table" dir="ltr">
+ <thead>
+  <tr>
+   <th scope="col">Espeficicações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="ltr" id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
+ <li dir="ltr">{{css_key_concepts}}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf