Расширение элементов в CSS для JavaScript

Задание CSS свойств width и height не гарантирует того, что элемент станет заданного размера. Давайте посмотрим на примерах.

Пример

Сейчас размеры элемента совпадают с заданными:

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

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

Результат:

Пример

А теперь давайте зададим элементу свойство padding. В результате реальная ширина элемента станет больше и расширится на заданное значение внутреннего отступа:

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

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

Результат:

Пример

Наличие границы также расширяет элемент:

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

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

Результат:

Пример

Свойство box-sizing позволяет изменять описанное выше поведение. Можно сделать так, чтобы ни внутренний отступ, ни граница не расширяли элемент. Для этого этому свойству нужно задать значение 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;
}

Результат:

Важность описанного

С точки зрения JavaScript описанная ситуация не очень удобна. Ведь получается, что прочитав значение свойства width мы совсем не можем быть уверенными в том, что элемент будет именно этой ширины.