Проширување на елементи во 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;
}

Результат:

Важност на описanoто

Од перспектива на JavaScript, описната ситуација не е многу погодна. Бидејќи излегува дека, откако ќе ги прочитаме вредностите на својството width, воопшто не можеме да бидеме сигурни дека елементот ќе биде токму таа ширина.