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

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

Valores

Valor	Descrição
`content-box`	Tanto o `padding` quanto o `border` expandem o bloco.
`border-box`	Nem o `padding` nem o `border` expandem o bloco.

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:

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

#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:

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

#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:

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

#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:

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

#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

a propriedade outline,
que cria uma borda que não expande o elemento