<div class="contentbox"> I am the content box</div>
<br />
<div class="borderbox"> I am the border box</div>
.contentbox {
box-sizing: content-box;
width: 200px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/
}
.borderbox {
box-sizing: border-box;
width: 200px;
border: 8px solid blue;
padding: 20px;
background: yellow;
/* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.