Уласцівасць 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,
якая робіць мяжу, якая не пашырае элемент