Expansão de elementos no CSS para JavaScript

Definir as propriedades CSS width e height não garante que o elemento terá o tamanho especificado. Vamos ver com exemplos.

Exemplo

Agora as dimensões do elemento coincidem com as definidas:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Exemplo

E agora vamos definir a propriedade padding para o elemento. Como resultado, a largura real do elemento ficará maior e se expandirá pelo valor definido do preenchimento interno:

<div id="elem">
	text
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Exemplo

A presença da borda também expande o elemento:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Exemplo

A propriedade box-sizing permite alterar o comportamento descrito acima. É possível fazer com que nem o preenchimento interno, nem a borda expandam o elemento. Para isso, é necessário definir o valor border-box para esta propriedade:

<div id="elem">
	text
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Importância do descrito

Do ponto de vista do JavaScript, a situação descrita não é muito conveniente. Pois acontece que, ao ler o valor da propriedade width, não podemos ter certeza de que o elemento terá exatamente essa largura.