Својството 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, а кај првиот - нема. Погледнете како се разликуваат нивните димензии:

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, а кај првиот - нема. Погледнете, како се разликуваат нивните димензии:

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

Да го додадеме на вториот елемент вредноста border-box за својството box-sizing. Сега димензиите и на првиот и на вториот елемент ќе станат исти:

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

Результат:

Погледнете исто така