Какво е свойството box-sizing: border-box и каква роля играе в CSS?

Свойството box-sizing определя как се изчислява общата ширина и височина на елемента.

box-sizing: content-box (по подразбиране) — ширината и височината се отнасят само за съдържанието (content). Padding и border се добавят към посочените стойности.

box-sizing: border-box — ширината и височината включват padding и border. content се свива, за да се побере вътре в зададените размери.

Ролята на box-sizing: border-box в CSS:

• Улесняване на изчисленията: Улеснява изчисляването на размерите на елементите, особено при използване на padding и border.
• Предсказуемост в оформлението: Позволява точно да се зададат размерите на блоковете, независимо от padding и border, което прави оформлението по-предсказуемо.
• Удобство в модела на кутията: Съответства на интуитивното разбиране за размера на блока — неговите рамки. Улеснява създаването на мрежи и компоненти с фиксиран размер.

Пример:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Общата ширина = 100 + 10*2 + 1*2 = 122px */
  /* Общата височина = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Общата ширина = 100px */
  /* Общата височина = 100px */
  /* Съдържанието ще заема 100 - 10*2 - 1*2 = 78px по ширина и височина */
}