title: How to make a div take up space even if it is empty?
body: <p>I have two images wrapped in divs, one with caption while another without:</p>
  
  <pre><code>&lt;div class="figure"&gt;
    &lt;a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"&gt;&lt;img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /&gt;&lt;/a&gt;
    &lt;div class="caption"&gt;title&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="figure"&gt;
    &lt;a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"&gt;&lt;img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /&gt;&lt;/a&gt;
   &lt;div class="caption"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And corresponding css is as follows:</p>
  
  <pre><code>.figure {
      display: inline-block;
  }
  .figure a {
      display: block;
  }
  .figure .caption {
      text-align: center;
      display: block;
      height: 22px;
  }
  </code></pre>
  
  <p>My problem is that even I have assigned height attribute to caption div, it still takes up no space, as a result tops of images are not aligned. Is there any fix to this? The problem code is also available at <a href="http://cssdesk.com/cF7G9" rel="noreferrer">http://cssdesk.com/cF7G9</a>.</p>