Why does div with content move down in inline-block?
<p>I have 3 divs like so: </p>

<pre><code>&lt;div class="div1"&gt;&lt;/div&gt;
&lt;div class="div2"&gt;&lt;/div&gt;
&lt;div class="div3"&gt;&lt;/div&gt;
</code></pre>

<p>with the following CSS: </p>

<pre><code>div {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  width: 100px;
}
</code></pre>

<p>When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height: </p>

<pre><code>&lt;div class="div1"&gt;X&lt;/div&gt;
&lt;div class="div2"&gt;Y&lt;/div&gt;
&lt;div class="div3"&gt;&lt;/div&gt;
</code></pre>

<p>Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div: </p>

<pre><code>&lt;div class="div1"&gt;X&lt;/div&gt;
&lt;div class="div2"&gt;Y&lt;/div&gt;
&lt;div class="div3"&gt;Z&lt;/div&gt;
</code></pre>

<p>Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around? </p>