<div class="container">     
  <p>All of the following containers have the same width and height set using the <code>width</code> and <code>height</code> properties. The first one has the default <code>box-sizing</code> value, and the second one has the <code>box-sizing</code> set to <code>padding-box</code> and the third one has the <code>box-sizing</code> set to <code>border-box</code>.</p>
  <div class="note">
    If your browser does not support the <code>padding-box</code> value, the second box may appear the same as the first one in that case.
  </div>
  <p>
    All three boxes have a 200px width and height, 30px padding (on 4 sides), and a 10px border.
  </p>
  <div class="element element-1">
    content-box (default)
  </div>
  <div class="element element-2">
    padding-box
  </div>
  <div class="element element-3">
    border-box
  </div>
</div>
body {
  background-color: #eee;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%
}

.note {
  background-color: rgba(253, 95, 95, 0.27);
  color: #e50c35;
  font-style: italic;
  font-size: .9em;
  padding: 1em;
}

.element {
  padding: 30px;
  background-color: #fff;
  margin-bottom: 30px;
  padding: 10px;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
  border: 10px solid #da537d;
}

.element-2 {
  box-sizing: padding-box;
}

.element-3 {
  box-sizing: border-box;
}