<div class="container">     
  <p>Both of the following containers have the same height set using the <code>height</code> property. The first one has the default box-sizing value, and the second one has the box-sizing set to border-box.</p>
  <div class="element element-1">
    I have a vertical padding of 60px. My height is set to 300px. My total height is 360px.
  </div>

  <div class="element boxSizing">
    I have a padding, and my <code>box-sizing</code> property has been set to <code>border-box</code>. My height is set to 300px. My total height remains 300px no matter how much vertical padding is added.
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  background-color: #009966;
  color: white;
  margin-bottom: 30px;
  padding: 30px 20px 30px 20px;
  height: 300px;
}

.boxSizing {
  box-sizing: border-box;
}