Својството 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,
кое создава граница што не ја проширува елементот