<div id="d1" class="content">
  <h4># content-box(初期値)</h4>
  <div class="content-a"></div>
</div><hr>

<div id="d2" class="content">
  <h4># border-box</h4>
  <div class="content-a"></div>
</div><hr>

<div id="d3" class="content">
  <h4># inherit</h4>
  <div class="content-a"></div>
</div><hr>
.content{
  background:silver;
  padding:10px;
}
.content-a{
  width:100px;
  height:50px;
  border: solid 10px black;
  padding:10px;
  background:skyblue;
}

#d1 div{
box-sizing:content-box;
}

#d2 div {
  box-sizing:border-box;
}

#d3div {
  box-sizing:inherit;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.