title: box-sizing border-box not working for top and bottom border
body: <p>I'm learning to build a responsive website for myself. I'm having a problem with the box-sizing border-box on the top and bottom borders of one of my images. I have two columns of images of different heights, I want the edges to match up but I also want a few pixels of white space to separate each image.</p>
  
  <p>My problem is when using box-sizing border-box on the top and bottom borders they stay outside of the edge of the image thus pushing the next image below down by a few pixels making it no longer match it's neighbour on the bottom edge.</p>
  
  <p>I want to fix this issue before going ahead and adding borders on the other images. I'm new to CSS so perhaps there is something very obvious i've got wrong?</p>
  
  <p>Any help to get the borders to stay on the inside edge of the images would be greatly appreciated!</p>
  
  <p>I've attached a screen grab of what is happening.
  <a href="http://i.stack.imgur.com/pRb76.jpg" rel="nofollow">border-box problem</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #rightCol {
     width: 50%;
     height: auto;
     float: right;
     box-sizing: border-box;
     border-left: 2px solid white;
   }
   #rightCol img {
     width: 100%;
     height: 100%;
     display: block;
   }
   #leftCol {
     width: 50%;
     height: auto;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     border-right: 2px solid white;
   }
   #leftCol img {
     width: 100%;
     height: 100%;
     display: block;
   }
   .innerBorder {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     border-top: 4px solid white;
     border-bottom: 4px solid white;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="rightCol"&gt;
    &lt;div&gt;
      &lt;img src="./images/pa.jpg" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="./images/game.jpg" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="./images/spine.jpg" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="leftCol"&gt;
    &lt;div&gt;
      &lt;img src="./images/truck.jpg" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img class="innerBorder" src="./images/ccc.jpg" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="./images/box.jpg" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>