css - 在带有display的元素上添加垂直空间:inline-block

Question

我有一系列具有css属性显示的缩略图容器元素:inline-block但是当它们彼此相邻排列时,第二个元素在顶部比第一个元素有更多空间(参见附图).知道为什么会这样吗？有没有更好的方法将这些元素排列在一起？我知道漂浮他们可以解决这个问题,但看起来浮动并不是解决这个问题的最好方法.

这是我的代码:

HTML:

<article class="thumb_container">
    <div class="thumb_content">
        <img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/>
        <header class="thumb_header">Perlin Lines</header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut.
            <a href="#">More...</a>
        </p>
    </div>
</article>

<article class="thumb_container">
    <div class="thumb_content">
        <img src="images/branching.gif" alt="Branching" class="thumb_img"/>
        <header class="thumb_header">Branching</header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. 
            <a href="#">More...</a>
        </p>
    </div>
</article>

CSS:

.thumb_container { display: inline-block; margin-left: 20px; width:220px; background: #fff; -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); }
.thumb_container:first-child { margin-left: 0px; }

Answer 1

只需添加vertical-align: top你拥有的地方display: inline-block.

更多信息:为什么这些元素没有显示:内联块正确对齐？