В чем заключается отличие между значениями box-sizing: border-box и box-sizing: content-box?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

box-sizing: content-box - стандартное значение, где размеры (width, height) элемента относятся только к его содержимому. Отступы (padding) и границы (border) добавляются к этому размеру, увеличивая общие габариты элемента.

box-sizing: border-box включает отступы (padding) и границы (border) в заданные размеры (width, height). Таким образом, общие габариты элемента остаются равными заданным width и height, а размер содержимого уменьшается пропорционально padding и border.

Свойство	box-sizing: content-box (по умолчанию)	box-sizing: border-box
`width`/`height`	Размер содержимого	Размер элемента целиком (включая padding и border)
Общий размер элемента	`width`/`height` + `padding` + `border`	`width`/`height`

Пример:

.element-content-box {
  width: 100px;
  height: 50px;
  padding: 10px; /* Добавляется к ширине и высоте */
  border: 1px solid black; /* Добавляется к ширине и высоте */
  box-sizing: content-box; /* По умолчанию */
}

.element-border-box {
  width: 100px;
  height: 50px;
  padding: 10px; /* Включается в ширину и высоту */
  border: 1px solid black; /* Включается в ширину и высоту */
  box-sizing: border-box;
}