Propriedade box-sizing

A propriedade box-sizing permite alterar o método de cálculo das dimensões de um elemento.

Por padrão, a adição de padding expande o elemento: se definirmos uma largura width de 100px e um padding-left de 20px, então a largura real do elemento será de 120px.

E se definirmos também um border-left de 10px, então a largura real do elemento passará a ser 130px. Ou seja, o padding e o border expandem o bloco (tanto em largura quanto em altura). Este comportamento pode ser alterado com o box-sizing.

Sintaxe

cssseletor {
  box-sizing: content-box | border-box;
}

Valores

Valor padrão: content-box.

Exemplo . Comportamento padrão

Agora ambos os blocos têm a mesma altura e largura, porém no segundo bloco o padding está definido, e no primeiro - não. Veja como seus tamanhos diferem:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Exemplo . Comportamento padrão

Agora ambos os blocos têm a mesma altura e largura, porém no segundo bloco está definida uma borda de 10px, e no primeiro - não. Veja, como seus tamanhos diferem:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Exemplo . Comportamento padrão

Agora o segundo bloco tem tanto padding quanto borda de 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Exemplo . Valor border-box

Vamos adicionar ao segundo elemento o valor border-box para a propriedade box-sizing. Agora as dimensões tanto do primeiro quanto do segundo elemento ficarão iguais:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Veja também