Разширяване на елементи в CSS за JavaScript

Задаването на CSS свойствата width и height не гарантира, че елементът ще стане зададения размер. Нека да разгледаме с примери.

Пример

В момента размерите на елемента съвпадат с зададените:

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

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

Пример

А сега нека зададем на елемента свойството padding. В резултат реалната ширина на елемента ще стане по-голяма и ще се разшири със зададената стойност на вътрешния отстъп:

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

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

Пример

Наличието на граница също разширява елемента:

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

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

Пример

Свойството box-sizing позволява промяна на описаното по-горе поведение. Може да се направи така, че нито вътрешният отстъп, нито границата да разширяват елемента. За това на това свойство трябва да се зададе стойност border-box:

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

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

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

От гледна точка на JavaScript описаната ситуация не е много удобна. В крайна сметка се оказва, че след като прочетем стойността на свойството width изобщо не можем да сме сигурни, че елементът ще бъде точно с тази ширина.