box-sizing calculation

Margin does not shown as it has no influence on the box size.

All values are dynamic, try to change values of the width, padding or border-width properties.

px
px
px

box-sizing: content-box;

Content width

Content width = width

Total element width = width + padding + border-width

box-sizing: border-box;

Content width

Total element width = width

Content width = width - padding - border-width