В чем разница между Box-sizing: Content-box и Border-box

В чем разница между box-sizing: content-box и border-box

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Developer

box-sizing определяет, как рассчитываются размеры элемента.

content-box (по умолчанию):

div {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  /* Фактическая ширина = 100 + 20 + 10 = 130px */
}

border-box:

div {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  /* Фактическая ширина = 100px (контент: 70px) */
}

Чаще используют border-box для упрощения вёрстки.