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

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

Thamani

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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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