Що таке content-box?

CSSJunior~1 хв читання

content-box, це стандартна (типова) модель розрахунку ширини і висоти елемента в CSS. При box-sizing: content-box; властивості width і height застосовуються лише до області вмісту (content), а padding і border додаються до розмірів зверху.

Приклад:

css

div {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}

Фактична ширина блока буде:

javascript

200 (content) + 20+20 (padding) + 5+5 (border) = 250px

Підсумок: при content-box елемент виходить більшим за заданий width/height, тому що внутрішня область рахується окремо від відступів і меж.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.