Sifa box-sizing

Sifa box-sizing inaruhusu kubadilisha njia ya kuhesabu vipimo vya kipengele.

Kwa chaguo-msingi kuongeza padding inapanua kipengele: ikiwa tumeweka upana width 100px na padding-left wa 20px, basi upana halisi wa kipengele utakuwa 120px.

Na ikiwa tutaweka pia border-left wa 10px, basi upana halisi wa kipengele utakuwa 130px. Yaani padding na border zinapanua kizuizi (na kwa upana, na kwa urefu). Tabia hii inaweza kubadilishwa kwa kutumia box-sizing.

Sintaksia

kichagua {
	box-sizing: content-box | border-box;
}

Thamani

Thamani	Maelezo
`content-box`	Na `padding`, na `border` zinapanua kizuizi.
`border-box`	Wala `padding`, wala `border` hazipanui kizuizi.

Thamani ya chaguo-msingi: content-box.

Mfano . Tabia ya kawaida

Hivi sasa vizuizi vyote viwili vina urefu sawa na upana sawa, hata hivyo kizuizi cha pili kina padding iliyowekwa, lakini cha kwanza - haina. Angalia jinsi vipimo vyake vinatofautiana:

<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;
}

Mfano . Tabia ya kawaida

Hivi sasa vizuizi vyote viwili vina urefu sawa na upana sawa, hata hivyo kizuizi cha pili kimewekwa mpaka wa 10px, lakini cha kwanza - haina. Angalia, jinsi vipimo vyake vinatofautiana:

<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;
}

Mfano . Tabia ya kawaida

Hivi sasa kizuizi cha pili kina padding, na mpaka wa 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;
}

Mfano . Thamani border-box

Tuongeze kipengele cha pili thamani border-box kwa sifa box-sizing. Sasa vipimo vya kipengele cha kwanza na cha pili vitakuwa sawa:

<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;
}

Angalia pia

sifa outline,
ambayo hufanya mpaka, usiopanua kipengele