CSS Box Sizing

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

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

Links

External Sources

CSS Box Sizing