Проширење елемената у 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, уопште не можемо бити сигурни да ће елемент бити управо те ширине.