<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>
  <p>
    The height of the first one increases when the top padding is added. The height of the second one remains the same. Both their heights are set to 200px using the <code>height</code> property.  
  </p>       
  <div class="element element-1">
    I have a top padding of 50px. My height is set to 200px. My total height is: 250px.
  </div>
  <div class="element boxSizing">
    I have a top padding, and my <code>box-sizing</code> property has been set to <code>border-box</code>. My height is set to 200px. My total height remains 200px no matter how much the padding is set.
  </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: #0099cc;
  color: white;
  margin-bottom: 30px;
  height: 200px;
}

.element-1 {
  padding-top: 50px;
}

.boxSizing {
  box-sizing: border-box;
  padding-top: 50px;
}