Box-sizing xususiyati

box-sizing xususiyati element o‘lchamlarini hisoblash usulini o‘zgartirish imkonini beradi.

Standart holda padding qo‘shish elementni kengaytiradi: agar biz kenglikni width 100px va padding-left ni 20px deb belgilasak, unda elementning haqiqiy kengligi 120px bo‘ladi.

Agar biz border-left ni ham 10px deb belgilasak, unda elementning haqiqiy kengligi 130px bo‘ladi. Ya'ni padding va border blokni kengaytiradi (ham kenglik, ham balandlik bo‘yicha). Ushbu xatti-harakatni box-sizing yordamida o‘zgartirish mumkin.

Sintaksis

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

Qiymatlar

Standart qiymat: content-box.

Misol . Standart xatti-harakat

Hozir ikkala blok ham bir xil balandlik va kenglikka ega, biroq ikkinchi blokda padding berilgan, birinchisida esa yo‘q. Ularning o‘lchamlari qanday farq qilishiga e'tibor bering:

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

Результат:

Misol . Standart xatti-harakat

Hozir ikkala blok ham bir xil balandlik va kenglikka ega, biroq ikkinchi blokda 10px chegarasi berilgan, birinchisida esa yo‘q. Ularning o‘lchamlari qanday farq qilishiga e'tibor bering:

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

Результат:

Misol . Standart xatti-harakat

Hozir ikkinchi blokda ham padding, ham 10px chegarasi mavjud:

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

Результат:

Misol . Border-box qiymati

Ikkinchi elementga box-sizing xususiyati uchun border-box qiymatini qo‘shamiz. Endi ham birinchi, ham ikkinchi elementning o‘lchamlari bir xil bo‘ladi:

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

Результат:

Shuningdek qarang