Свойство box-sizing

IC691970
Рис. 1. Ширина элемента при значении box-sizing: content-box
IC691971
Рис. 2. Ширина элемента при значении box-sizing: border-box

Свойство box-sizing сообщает браузеру, каким образом производить расчет ширины и высоты элемента.

В обычной ситуации ширина блока элемента складывается из ширины содержимого блока width, полей padding и границ border.

Свойство box-sizing позволяет изменить способ вычисления таким образом, чтобы свойства width и height задавали не размеры контента, а размеры блока.

Свойство принимает два значения:
box-sizing: content-box; — значение по умолчанию, ширина элемента включает в себя только ширину контента (содержимого).

box-sizing: border-box; — свойства width и height элемента включают в себя ширину поля padding и ширину рамки border-width, таким образом, общая ширина и высота блока остается равной объявленной свойством width и height элемента, а ширина контента уменьшается.

Задавая ширину полей в %, можно добиться большей гибкости.