title: Why does an inline-block div get positioned lower when it has content?
body: <p>If you have three identical divs positioned inline-block they are aligned perfectly. But if you put any content in any of the divs it drops down below the others. Why does it do that?</p>
  
  <pre><code>&lt;div class="left"&gt;?&lt;/div&gt;
  &lt;div class="center"&gt;&lt;/div&gt;
  &lt;div class="right"&gt;&lt;/div&gt;
  
  div {
      display:inline-block;
      margin-:2px;
      height:100px;
      width:25px;
      border:1px solid black;
  }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/7kkC6/">http://jsfiddle.net/7kkC6/</a></p>
  
  <p>better example: <a href="http://jsfiddle.net/7kkC6/9/">http://jsfiddle.net/7kkC6/9/</a></p>