box-sizing

Порядок измерения высоты и ширины элемента

context-box

Обычный порядок

box-sizing: context-box;

width: 200px;
height: 100px;
background: red;
padding: 20px;
margin: 20px;
Text

padding-box

Включить в расчет значение padding

box-sizing: padding-box;

width: 200px;
height: 100px;
background: red;
padding: 20px;
margin: 20px;
Text

border-box

Включить в расчет значение border

box-sizing: border-box;

width: 200px;
height: 100px;
background: red;
padding: 20px;
margin: 20px;
Text