Какие существуют значения для свойства box-sizing в CSS?

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

Пример демонстрации content-box и border-box:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* Фактическая ширина будет 100 + 2*20 + 2*5 = 150px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box; /* Фактическая ширина будет 100px */
}