html - 如何让一个div即使是空的也占空间？

Question

我有两张图片包裹在 div 中，一张有标题，另一张没有:

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
  <div class="caption">title</div>
</div>

<div class="figure">
  <a href="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg"><img src="https://a248.e.akamai.net/assets.github.com/images/modules/footer/blacktocat.svg" height="100px" /></a>
 <div class="caption"></div>
</div>

对应的css如下:

.figure {
    display: inline-block;
}
.figure a {
    display: block;
}
.figure .caption {
    text-align: center;
    display: block;
    height: 22px;
}

我的问题是，即使我已经将高度属性分配给标题 div，它仍然不占用空间，结果图像的顶部没有对齐。有什么办法解决这个问题吗？问题代码也可在 http://cssdesk.com/cF7G9 找到。 .

Answer 1

添加:

.figure {
    vertical-align: top
}