Что такое свойство 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 по ширине/высоте */
}