Box-sizing häsiýeti

box-sizing häsiýeti elementleriň ölçegleriniň hasaplanyş usulyny üýtgetmäge mümkinçilik berýär.

Adaty ýagdaýda padding goşmak elementleri giňeldýär: eger biz ini width 100px we padding-left 20px hökmünde kesgitlesek, elementiň hakyky ini 120px bolar.

Eger-de biz border-left 10px⁅/u ⁆ hökmünde hem kesgitlesek, elementiň hakyky ini 130px bolar. Ýagny padding we border⁅/c ⁆ bloklary giňeldýär (hem ini, hem beýikligi boýunça). Bu hereketi box-sizing ýardamy bilen üýtgedip bolýar.

Sintaksis

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

Görnüşleri

Adaty ýagdaýdaky görnüşi: content-box.

Mysal . Standart hereket

Häzir iki blokyň hem deň beýikligi we ini bar, ýöne ikinji blokda padding kesgitlenen, birinjide ýok. Olaryň ölçegleriniň näçe tapawutlanýandygyna serediň:

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

Результат:

Mysal . Standart hereket

Häzir iki blokyň hem deň beýikligi we ini bar, ýöne ikinji blokda 10px çäginde araçäk kesgitlenen, birinjide ýok. Olaryň ölçegleriniň näçe tapawutlanýandygyna serediň:

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

Результат:

Mysal . Standart hereket

Häzir ikinji blokyň hem padding, hem araçäg 10px⁅/u ⁆ çäginde bar:

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

Результат:

Mysal . Border-box görnüşi

Ikinji element üçin box-sizing häsiýetine border-box görnüşini goşalyň. Indi birinjiniň we ikinjiniň ölçegleri deň bolar:

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

Результат:

Şeýle-de serediň