Propriedade CSS box-sizing

A propriedade box-sizing controla como a width e a height de um elemento são calculadas — especificamente, se o padding e o border são contados dentro dessas dimensões ou adicionados por cima delas. É uma das propriedades CSS3.

Esta página explica a diferença entre os dois modelos de caixa (content-box e border-box), por que border-box é o padrão moderno para a maioria dos layouts e como aplicá-lo em uma página inteira.

Como o modelo de caixa afeta o tamanho

Por padrão (content-box), width e height definem apenas o tamanho da área de conteúdo. O padding e o border são então adicionados por cima, de modo que a caixa renderizada é maior do que o valor que você escreveu:

largura + padding + border = largura renderizada do elemento
altura + padding + border = altura renderizada do elemento

Por exemplo, uma caixa com width: 400px, padding: 50px em cada lado e uma borda de 5px em cada lado ocupa na verdade 400 + 100 + 10 = 510px de espaço horizontal. Esta é uma fonte frequente de bugs de layout: duas colunas com 50% de largura com qualquer padding ou border não caberão lado a lado, pois cada uma acaba sendo maior do que metade do contêiner.

Com box-sizing: border-box, o padding e o border são puxados para dentro da largura e altura declaradas. Um elemento com width: 50% permanece exatamente na metade da largura do contêiner, independentemente de quanto padding ou border você adicione — é por isso que a maioria das folhas de estilo redefine todos os elementos para border-box.

Valor Inicial	content-box
Aplica-se a	Todos os elementos que aceitam largura e altura.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.boxSizing = "border-box";

Sintaxe

Sintaxe da Propriedade CSS box-sizing

box-sizing: content-box | border-box | initial | inherit;

O exemplo abaixo mostra dois elementos <div> com declarações idênticas de width, height, padding e border — eles diferem apenas no valor de box-sizing, o que é suficiente para fazê-los renderizar em tamanhos diferentes:

Exemplo da propriedade box-sizing

Exemplo da Propriedade CSS box-sizing com os valores content-box e border-box

<!DOCTYPE html>
<html>
  <head>
    <style>
      .div1 {
        box-sizing: content-box;
        width: 400px;
        height: 50px;
        padding: 50px;
        border: 5px double #1c87c9;
      }
      .div2 {
        box-sizing: border-box;
        width: 400px;
        height: 50px;
        padding: 50px;
        border: 5px dashed #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <hr />
    <h3>box-sizing: content-box (default):</h3>
    <div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
    <br />
    <h3>box-sizing: border-box:</h3>
    <div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Com content-box, a caixa renderizada é mais larga do que a width declarada porque o padding e o border são adicionados a ela. Com border-box, o padding e o border são absorvidos pela width e height declaradas, de modo que a caixa permanece exatamente do tamanho que você especificou.

border-box é o valor que você usará com mais frequência ao construir layouts. Ele torna os tamanhos dos elementos previsíveis e elimina toda uma classe de armadilhas — você pode adicionar padding ou uma borda sem precisar recalcular as larguras.

Exemplo de duas caixas com borda posicionadas lado a lado

Aqui border-box permite que duas caixas com float de 50% de largura fiquem uma ao lado da outra, mesmo que cada uma tenha sua própria borda e padding. Com o content-box padrão, as bordas e o padding empurrariam a largura combinada para além de 100% e forçariam a segunda caixa para uma nova linha.

Exemplo da Propriedade CSS box-sizing com o valor border-box

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.container {
        width: 100%;
        border: 2px double #1c87c9;
      }
      div.box {
        box-sizing: border-box;
        width: 50%;
        border: 3px solid #ccc;
        float: left;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <p>Here you can see two bordered boxes defined side by side.</p>
    <div class="container">
      <div class="box">Left part</div>
      <div class="box">Right part</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Aplicando border-box em toda a página

Em vez de definir box-sizing em elementos individuais, a maioria dos projetos o aplica uma vez a todos os elementos com o seletor universal. Este é o reset CSS mais comum em folhas de estilo modernas:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Os seletores *::before e *::after garantem que as caixas de conteúdo gerado sigam a mesma regra. Após esse reset, width e height significam "o tamanho total incluindo padding e border" em todos os lugares, o que é o que a maioria das pessoas espera intuitivamente.

Suporte dos navegadores

box-sizing é suportado em todos os navegadores modernos, incluindo as versões atuais do Chrome, Firefox, Safari e Edge. É um recurso CSS3 estável e não precisa de prefixos de fornecedor para os navegadores atuais.

Valores

Valor	Descrição
content-box	As propriedades width e height incluem o conteúdo, mas o padding, border ou margin não são incluídos. É o valor padrão.
border-box	As propriedades width e height incluem o conteúdo, o padding e o border, mas não incluem a margin.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade CSS 'box-sizing' faz?

Permite incluir o padding e o border na largura e altura total de um elemento.Define a cor de uma caixa.É usada para calcular a largura e a altura de um elemento.É usada para definir a margin de um elemento.Impede que uma caixa ultrapasse o seu conteúdo.