title: CSS anchor inline-block misaligned
body: <p>I have this <a href="http://jsfiddle.net/BAw5F/" rel="nofollow">JSFiddle</a>. Can someone explain, why is the anchor position misaligned relative to its siblings? I know I can correct it with position relative and negaitve top offset, but I don't understand, why it is like this in the first place.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;a href=""&gt;Some link&lt;/a&gt;
      &lt;div class="right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      height: 25px;
      white-space: nowrap;
  }
  
  .container .left {
      border: 1px solid black;
      display: inline-block;
      margin: 0;
      height: 25px;
      width: 80px;
      padding: 0;
  }
  
  .container .right {
      border: 1px solid black;
      display: inline-block;
      margin: 0;
      height: 25px;
      width: 80px;
      padding: 0;
  }
  
  .container a {
      display: inline-block;
      border: 1px solid black;
      height: 25px;
      width: 300px;
      margin: 0;
  }
  </code></pre>