CSS Box Model Meet Box-Sizing!

CSS Box Model

Setting the width and height of an element can make it appear bigger than you intended. That’s because the CSS ‘box model’ calculates box-size like this:

width + padding-left + padding-right+border-left + border-right = rendered box width

width + padding-top + padding-bottom+border-top + border-bottom = rendered box height

.box{
  width: 500px;
  margin: 20px auto;
}

.sized{
  width: 500px;
  padding: 50px;
  border: 10px solid #66FFCC
  margin: 20px auto;
}

Then came Box-Sizing!

An element with box-sizing: border-box; will no longer increase in size with padding and a border.

Here is the example again with box-sizing: border-box; set for both boxes.

.box{
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sized{
  width: 500px;
  padding: 50px;
  border: 10px solid #66FFCC
  margin: 20px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}