Какие 3 свойства влияют на размер ширины в CSS?

div {
  width: 200px; /* Ширина содержимого */
}

div {
  width: 200px;
  padding: 20px; /* +40px к общей ширине (по 20px слева и справа) */
}
/* Итоговая ширина: 200px (content) + 40px (padding) = 240px */

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black; /* +10px к ширине (по 5px слева и справа) */
}
/* Итоговая ширина: 200 + 40 + 10 = 250px */

div {
  box-sizing: border-box;
  width: 200px; /* Теперь это общая ширина */
  padding: 20px; /* Входит в 200px */
  border: 5px solid black; /* Тоже входит в 200px */
  /* Ширина содержимого: 200 - 40 (padding) - 10 (border) = 150px */
}