Box-sizing хусусияти

box-sizing хусусияти элемент ўлчамларини хисоблаш усулини ўзгартириш имконини беради.

Стандарт холда padding қўшиш элементни кентайтиради: агар биз энни width 100px ва padding-left ни 20px қилсак, элементнинг ҳақиқий эни 120px бўлади.

Агар биз яна border-left ни 10px қилсак, элементнинг ҳақиқий эни 130px бўлади. Яъни padding ва border блокни кентайтиради (ва эн, ва бўй бўйича). Бу ҳаракатни box-sizing ёрдамида ўзгартириш мумкин.

Синтаксис

cssселектор {
  box-sizing: content-box | border-box;
}

Қийматлар

Стандарт қиймат: content-box.

Мисол . Стандарт харакат

Ҳозирда ҳар икки блокнинг бўйи ва эни бир хил, бирок иккинчи блокда padding берилган, биринчисида эсa - йўқ. Уларнинг ўлчамлари қандай фарқ қиланини кўринг:

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

Результат:

Мисол . Стандарт харакат

Ҳозирда ҳар икки блокнинг бўйи ва эни бир хил, бирок иккинчи блокда 10px чегара берилган, биринчисида эсa - йўқ. Уларнинг ўлчамлари қандай фарқ қиланини кўринг:

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

Результат:

Мисол . Стандарт харакат

Ҳозирда иккинчи блокда ҳам padding, ҳам 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;
}

Результат:

Мисол . Border-box қиймати

Иккинчи элементга box-sizing хусусияти учун border-box қийматини қўшайлик. Энди ҳар икки элементнинг ўлчамлари бир хил бўлади:

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

Результат:

Шунингдек кўринг