<div class="container">     
  <p>Both of the following containers have the same height and width set using the <code>height</code> and <code>width</code> properties. 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 and width of the first one increase when the padding is added. The height of the second one remains the same. Both their heights and widths are set to 330px by 300px respectively using the <code>height</code> and <code>width</code> properties.  
  </p>       
  <div class="element element-1">
    I have a padding of 30px. My height is set to 330px. My total height is: 390px. My width is set to 300px. My total width is 460px.
  </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 330px. My total height remains 330px no matter how much the padding is set. My width is set to 300px. My total width remains 300px no matter how much padding is added.
  </div>
  <p>
    Note that if you increase the padding of an element with <code>box-sizing: border-box</code> too much, the content might end up being cut off if the height is fixed. Try adding more content to the second element above and see how that happens.
  </p>
  <p>
    To avoid that, make sure you don't set any fixed heights on your elements. It is almost always best to let the element's height adjust to the content inside it.
  </p>
  <div class="element boxSizing adjust">
    I have a padding, and my <code>box-sizing</code> property has been set to <code>border-box</code>. My height is adjusted to my content. My width is set to 300px. My total width remains 300px no matter how much padding is added.
    <p>
      I have more content than the second element, and the same padding, but my content does not get cut off because my height is set to <code>auto</code>, which means that my height increases as my content does.
    </p>
    <p>
      The box-sizing property still has the same effect on my width.
    </p>
  </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;
  width: 400px;
}

.element-1 {
  padding: 30px;
}

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

.adjust {
  height: auto;
}