CSS Box Sizing

CSS box-sizing: border-content

by Boris Huai

HTML

<h2>W3C Stantard Model</h2>
<div class="standard">
    This is W3C standard box model.
</div>

<h2>box-sizing: border-box</h2>
<div class="borderbox">
    This is CSS3 box-sizing: border-box model.
</div>

CSS

.standard,
.borderbox {
  color: #fff;
}
.standard {
  background-color: #000;
  height: 80px;
  padding: 10px 0;
}

.borderbox {
  background-color: #000;
  box-sizing: border-box;
  height: 100px;
  padding: 10px 0;
}