Expansión de elementos en CSS para JavaScript

Establecer las propiedades CSS width y height no garantiza que el elemento adquiera el tamaño especificado. Veamos algunos ejemplos.

Ejemplo

Ahora las dimensiones del elemento coinciden con las establecidas:

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

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

Результат:

Ejemplo

Y ahora establezcamos la propiedad padding al elemento. Como resultado, el ancho real del elemento será mayor y se expandirá según el valor establecido del relleno interno:

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

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

Результат:

Ejemplo

La presencia del borde también expande el elemento:

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

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

Результат:

Ejemplo

La propiedad box-sizing permite cambiar el comportamiento descrito anteriormente. Es posible hacer que ni el relleno interno ni el borde expandan el elemento. Para ello, esta propiedad debe establecerse en border-box:

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;
}

Результат:

Importancia de lo descrito

Desde el punto de vista de JavaScript, la situación descrita no es muy conveniente. Después de todo, resulta que al leer el valor de la propiedad width no podemos estar seguros en absoluto de que el elemento tendrá exactamente ese ancho.