Разширяване на елементи в 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 изобщо не можем да сме сигурни, че елементът ще бъде точно с тази ширина.