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

Posted 2023-03-05

【中文标题】css - 在带有 display:inline-block 的元素上添加垂直空间 [重复]

【英文标题】：css - vertical space being added on elements with display:inline-block [duplicate]

【发布时间】：2011-12-24 16:58:38

【问题描述】：

我有一系列带有 css 属性 display:inline-block 的缩略图容器元素，但是当它们彼此相邻排列时，第二个元素在顶部的空间比第一个元素大（见附图）。知道为什么会这样吗？有没有更好的方法将这些元素彼此相邻排列？我知道浮动它们可以解决这个问题，但似乎浮动并不是解决这个问题的最佳方式。

这是我的代码：

html：

<article class="thumb_container">
    <div class="thumb_content">
        <img src="images/perlin.jpg"  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"  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; 

【参考方案1】：

有时浮动是最好的答案。

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

【参考方案2】：

你必须这样想：内联块基本上是具有一些增强行为的内联元素。那么，当您将内联元素彼此相邻放置时会发生什么？举个例子：

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

在这句话中a 和stupid 用空格隔开。这就是你所期望的。在您的示例中，一个 article 标记与下一个标记用空格分隔。所以最简单的解决方案是像这样去除标签之间的空白：

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

另一种解决方案是浮动容器，但是当您使用浮动时，display:inline-block 会变得毫无用处。你可以简单地剥离它。

【参考方案3】：

只需在您拥有display: inline-block 的地方添加vertical-align: top。

更多信息在这里：Why aren't these elements with display:inline-block properly aligned?

【讨论】：

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