title: Word break pushes next li down
body: <p>I'm using <code>display: inline-block</code> to display my posts and whenever there's a long name, which needs to break on to a second line it pushes the next <code>li</code> down. I'm not exactly sure why it does this? </p>
  
  <p><img src="https://i.stack.imgur.com/L0Bws.png" alt="When a word/line breaks it pushes li up"></p>
  
  <p>Code: </p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="thumbnail"&gt;&lt;/div&gt;
      &lt;div class="title"&gt;&lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.li {
      display: inline-block;
      margin: 7px;
      padding-bottom: 40px;
  }
  
  .thumbnail {
      width: 240px;
      height: 240px;
      overflow: hidden;
      background-position: center center;
      background-size: cover;
  }
  
  .title {
      padding-top: 10px;
      max-width: 240px;
      text-align: center;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'MavenProMedium';
      font-size: 18px;
  }
  </code></pre>