The element's dimension properties don't refer to the visible dimensions of an element but its actual content.

Changing the box-sizing property allows us to include the padding and borders in an element's total dimensions.

<html>
<head>
<style>.box {width: 300px;height: 100px;padding: 25px;border: 2px solid black;margin: 25px;}#box2 {box-sizing: border-box;}</style></head><body><div class="box" id="box1"></div><div class="box" id="box2"></div></body>
</html>
]]>

Do you see the difference? Using border-box, the dimension properties include the actual content, padding and borders (but not the margins).

Well, content-box is the default value and specifies that the dimension properties should only include the actual content.