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

你必须这样思考：内联块基本上是内联元素，具有一些增强的行为。那么当你将内联元素放在一起时会发生什么呢？这是一个例子：

 <p>This is <strong>a</strong> <span>stupid</span> example.</p>

在这句话中，a和stupid由空格分隔。这就是你所期望的。在您的示例中，一个article标记用下一个空格分隔。因此，最简单的解决方案是剥离标签之间的空白，如下所示：

<article>
  ...
</article><article>
  ...
</article>

另一个解决方案是浮动容器，但是当您使用浮动时，display:inline-block呈现的方式相当无用。你可以简单地删除它。

Answer 2

有时漂浮是最好的答案。

.thumb_container { 
    display: inline-block;
    float: left;             <-------
    margin: 0 0 0 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; }