Какое CSS-свойство влияет на то, как рассчитывается итоговый размер элемента с учётом padding и border? Чем отличаются значения этого свойства?

Что такое box-sizing?

Свойство box-sizing в CSS определяет, как браузер рассчитывает общую ширину и высоту элемента. Оно напрямую влияет на то, включаются ли внутренние отступы (padding) и границы (border) в заданные размеры. Понимание этого свойства необходимо для точного управления макетом, особенно при создании адаптивных интерфейсов.

Значения свойства

• content-box (значение по умолчанию): Ширина и высота задаются только для содержимого. padding и border добавляются поверх, увеличивая итоговый размер элемента.
• border-box: Ширина и высота включают содержимое, padding и border. Итоговый размер элемента остается равным заданному, что упрощает расчеты.

Пример кода

/* content-box (по умолчанию) */
.element-content {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Итоговая ширина: 200 + 20*2 + 5*2 = 250px */
}

/* border-box */
.element-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Итоговая ширина: 200px (padding и border внутри) */
}

Где применяется

Свойство border-box широко используется в современных CSS-фреймворках (например, Bootstrap) и при верстке адаптивных сеток. Оно позволяет задавать размеры колонок в процентах, не беспокоясь о том, что padding или border нарушат сетку. Рекомендуется устанавливать box-sizing: border-box глобально для всех элементов через селектор *.

Вывод

Используйте box-sizing: border-box для упрощения расчетов размеров элементов, особенно в адаптивных макетах. Это делает верстку более предсказуемой и уменьшает количество ошибок при добавлении отступов и границ.