I changed the height of the second div - it appears much the same in both examples, actually example 1, which is 100px looks bigger.
<style> #example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } #example2 { box-sizing: border-box; width: 300px; height: 150px; padding: 30px; border: 10px solid blue; } </style>
The box-sizing Property
Defines how the width and height of an element are calculated: should they include padding and borders, or not.
box-sizing: content-box (default):
Width and height only apply to the content of the element:
Example 1
This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!
The height is 100px
This div has a width of 300px. But the full width is 300px + 20px (left and right border) + 60px (left and right padding) = 380px!
The height is 100px
box-sizing: border-box:
Width and height apply to all parts of the element: content, padding and borders:
Example 2
Here, the full width is 300px, no matter what!
The height here is 150px
Here, the full width is 300px, no matter what!
The height here is 150px
Links
External Sources