css - 在顯示元素上添加垂直空間：內嵌塊

Question

我有一系列縮略圖容器元素與css屬性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; } 

Answer 1

只需添加vertical-align: top即可，您有display: inline-block。

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

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

Answer 3

您必須這樣認爲：內聯塊基本上是內聯元素，具有一些增強的行爲。那麼當你將內聯元素放在一起時會發生什麼呢？這裏的一個示例：

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

在這個句子a和stupid由空格分開。這就是你所期望的。在您的示例中，一個article標記與下一個空格分隔。所以，最簡單的辦法就是剝去標籤之間的空白是這樣的：

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

另一種解決方案是浮動的容器，但display:inline-block呈現相當無用的，當你使用浮動。你可以簡單地剝離它。