1 files changed, 71 insertions, 0 deletions
diff --git a/files/pt-br/web/css/box-sizing/index.html b/files/pt-br/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..2d2edba616
--- /dev/null
+++ b/files/pt-br/web/css/box-sizing/index.html
@@ -0,0 +1,71 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - Propriedades
+  - Web
+translation_of: Web/CSS/box-sizing
+---
+<p>A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax">Sintaxe formal</a>: {{csssyntax("box-sizing")}}
+</pre>
+
+<pre>box-sizing: content-box
+box-sizing: border-box
+
+box-sizing: inherit
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>Essa é o estilo padrão, conforme especificado pela norma CSS. As propriedades {{Cssxref("width")}} (largura) e {{Cssxref("height")}} (altura) são medidas incluindo só o conteúdo, mas não o padding, border ou margin. Nota: Padding, border e margin serão fora da box. Exemplo.: Se .box {width: 350px} então se você aplicar uma propriedade {border: 10px solid black;} o resultado renderizado no navegador (browser) será .box {width: 370px;}</dd>
+ <dt><code>padding-box</code>{{experimental_inline}} {{obsolete_inline}}</dt>
+ <dd>As propriedades de largura ({{Cssxref("width")}}) e de altura ({{Cssxref("height")}}) incluem o tamanho padding size, mas não incluem a propriedade border ou margem.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>As propriedades de largura ({{Cssxref("width")}}) e de altura ({{Cssxref("height")}}) incluem o tamanho padding size e a propriedade border, mas não incluem a propriedade margin.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush:css">/* funciona em Firefox, WebKit, Opera and IE8+ */
+/* exemplo de uso no navegador Firefox */
+
+.exemplo {
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Situação</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores_browsers">Compatibilidade dos navegadores (browsers)</h2>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model">CSS box model</a> [Eng]</li>
+</ul>