Пашырэнне элементаў у 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 мы зусім не можам быць упэўненымі ў тым, што элемент будзе менавіта гэтай шырыні.