css - display：inline-blockの要素に垂直方向のスペースが追加されました

Question

cssプロパティの表示を持つ一連のサムネイルコンテナ要素があります：インラインブロックですが、隣り合わせに2番目の要素最初のものよりも上にスペースがあります（添付の画像を参照）。なぜこのようなことが起こるのか？これらの要素を互いに隣り合わせて整列させるより良い方法はありますか？私はそれらを浮かべてこの問題を解決することを知っていますが、浮動小数点の問題はこの問題を解決する最良の方法ではないようです。

はここに私のコードです：

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

display: inline-blockがある場合は、vertical-align: topを追加してください。

詳細情報はこちら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は空白で区切られています。それはあなたが期待するものです。あなたの例では、1つのarticleタグは、次のタグから空白で区切られています。だから、最も簡単な解決策は、このように、タグ間の空白を除去することである。

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

別の解決策は、コンテナをフロートすることですが、浮動小数点数を使用する場合display:inline-blockは、かなり役に立たないレンダリングされます。あなたは単にそれを剥がすことができます。