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