border-box

by Chs97

HTML

<div class="box">
  
</div>
  <p>contentWidth = width</p>
<div class="border-box">
</div>
  <p>contentWidth = width - (border-left + padding-left + padding-right + border-right)</p>

CSS

.box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 5px solid red;
  padding: 5px 10px 15px 20px;
  margin: 10px;
}
.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 5px solid red;
  padding: 5px 10px 15px 20px;
  margin: 10px;
}