title: CSS - Elements styled as inline-block with uniform width and height don't form a grid
body: <p>I am having a little trouble understanding the following:</p>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html dir="ltr" lang="en-US"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;CSS Test&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="test.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="id_main"&gt;
          &lt;div id="id_item1" class="item"&gt;
              &lt;p&gt;Item 1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="id_item2" class="item"&gt;
              &lt;p&gt;
                  Item 2 - This item has more text than the first item
                  and it shows because the text wraps around and changes
                  the vertical size of the item.
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="id_item3" class="item"&gt;
              &lt;p&gt;Item 3&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="id_item4" class="item"&gt;
              &lt;p&gt;Item 4&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="id_item5" class="item"&gt;
              &lt;p&gt;Item 5&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.css</strong></p>
  
  <pre><code>#id_main {
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      background-color: teal;
      vertical-align: top;
  }
  
  div.item {
      border: 1px solid black;
      display: inline-block;
      width: 255px;
      text-align: center;
      background-color: grey;
      height: 129px;
  }
  </code></pre>
  
  <p>Since the items all have uniform widths and heights, I was expecting that the items would display in a grid almost like a table.  In the first row, though, item1 is aligned with the bottom of the row and item2 is aligned with the top!  And the row is larger than the height of either item.  Why does this happen?</p>
  
  <p>Thanks,</p>
  
  <p>Carl</p>