CSS - display:inline-block的元素添加了垂直空间

Question

我有一系列带有display: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; }

- mheavers

Answer 1

在使用 display: inline-block 的地方添加 vertical-align: top。

更多信息请查看此处：为什么使用 display:inline-block 的元素不能正确对齐？

- thirtydot

---

谢谢。我在实际代码中花了太多时间寻找空格。 - user1214678

Answer 2

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

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

在这个句子中，a和stupid之间用一个空格隔开。这是你所期望的。在你的例子中，一个article标签与下一个标签之间用一个空格隔开。因此，最简单的解决方案是去掉标签之间的空格，像这样：

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

另一种解决方案是将容器浮动，但当您使用浮动时，display:inline-block就变得无用了。您可以简单地将其删除。

- topek

Answer 3

有时候浮点数是最好的答案。

.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; } 

- Max