Хусусияти box-sizing

Хусусияти box-sizing иҷозат медиҳад, ки усули ҳисоб кардани андозаҳои элементро тағйир диҳед.

Ба таври пешфарз илова кардани padding элементро васеъ мекунад: агар мо паҳнӣ (width)-ро 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,
ки ҳудудеро месозад, ки элементро васеъ намекунад