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:

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

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

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

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

Результат:

Exemplo

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

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

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

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

css#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.