Как свойство box-sizing влияет на размер элемента?

Свойство box-sizing определяет, как ширина и высота элемента вычисляются: включая или исключая отступы (padding) и границы (border).

Существует два основных значения:

• content-box (значение по умолчанию): Ширина и высота элемента включают только содержимое (content). Padding и border добавляются сверх указанных ширины и высоты.
• border-box: Ширина и высота элемента включают содержимое (content), padding и border. Указанные ширина и высота — это общие размеры элемента.

Пример:

css