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 берилган, биринчисида эсa - йўқ. Уларнинг ўлчамлари қандай фарқ қиланини кўринг:

<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 чегара берилган, биринчисида эсa - йўқ. Уларнинг ўлчамлари қандай фарқ қиланини кўринг:

<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 қиймати

Иккинчи элементга box-sizing хусусияти учун border-box қийматини қўшайлик. Энди ҳар икки элементнинг ўлчамлари бир хил бўлади:

<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 хусусияти,
элементни кентайтмайдиган чегара яратади