unslug pt-br: move

2 files changed, 62 insertions, 0 deletions

diff --git a/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html
new file mode 100644
index 0000000000..8c0db35cf6
--- /dev/null
+++ b/files/pt-br/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -0,0 +1,62 @@
+---
+title: Box model
+slug: Web/CSS/box_model
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<h2 id="Resumo">Resumo</h2>
+
+<p>Em uma página WEB, cada elemento é representado como um <em>box </em>retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses <em>boxes</em> é o objetivo do mecanismo de renderização.</p>
+
+<p>No CSS, cada um desses <em>boxes </em>retangulares é descrita usando o <em>box model</em> padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: <strong>margin edge</strong>, <strong>border edge</strong>, <strong>padding edge</strong> e <strong>content edge</strong>.</p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><a name="content"></a>A <strong>área de conteúdo </strong>(content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do <em>content edge</em>; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.</p>
+
+<p>Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.</p>
+
+<p><a name="padding"></a>A <strong>área de preenchimento</strong> (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do <em>padding edge,</em> e suas dimensões são a <em>largura do padding-box </em>e a <em>altura do padding-box.</em></p>
+
+<p>O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.</p>
+
+<p><a name="border"></a>A <strong>área de borda </strong>(border area<strong>)</strong> estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do <em>border edge</em>, e suas dimensões são a largura e a altura do <em>border-box. </em>Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.</p>
+
+<p><a name="margin"></a>A <strong>área de margem </strong>(margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do <em>margin edge,</em> e suas dimensões são a largura e a altura do <em>margin-box</em>.</p>
+
+<p>O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.</p>
+
+<p>Quando ocorre um <a href="/pt-BR/docs/Web/CSS/margin_collapsing" title="pt-BR/docs/Web/CSS/margin_collapsing">colapso de margens</a>, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.</p>
+
+<p>Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.</p>
+
+<h2 id="Especificação">Especificação</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("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Embora mais precisamente formulada, não existem mudanças práticas</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/CSS/CSS_Reference" title="Referência CSS">Referência CSS</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>Propriedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
+</ul>
diff --git a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html
index cb658d4131..cb658d4131 100644
--- a/files/pt-br/web/css/css_box_model/margin_collapsing/index.html
+++ b/files/pt-br/web/css/css_box_model/mastering_margin_collapsing/index.html