Својство box-sizing

Својство box-sizing омогућава промену начина израчунавања димензија елемента.

Подразумевано додавање padding проширује елемент: ако смо задали ширину width 100px и padding-left од 20px, онда ће стварна ширина елемента бити 120px.

А ако задамо још и border-left од 10px, онда ће стварна ширина елемента постати 130px. То јест, padding и border проширују блок (и по ширини и по висини). Ово понашање се може променити помоћу box-sizing.

Синтакса

селектор {
	box-sizing: content-box | border-box;
}

Вредности

Вредност	Опис
`content-box`	И `padding`, и `border` проширују блок.
`border-box`	Ни `padding`, ни `border` не проширују блок.

Подразумевана вредност: content-box.

Пример . Стандардно понашање

Сада оба блока имају исту висину и ширину, међутим код другог блока је задат padding, а код првог није. Погледајте како се разликују њихове димензије:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Пример . Стандардно понашање

Сада оба блока имају исту висину и ширину, међутим код другог блока је задата ивица од 10px, а код првог није. Погледајте како се разликују њихове димензије:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Пример . Стандардно понашање

Сада други блок има и padding, и ивицу од 10px:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Пример . Вредност border-box

Додајмо другом елементу вредност border-box за својство box-sizing. Сада ће димензије и првог и другог елемента постати исте:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Погледајте такође

својство outline,
које прави ивицу која не проширује елемент