---
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="Browser_compatibility">Compatibilidade com navegadores</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>