なぜ私のdivは整列していませんか？

Question

Demo。私はその中にimgを持つdivと、プレースホルダであることを意図したイメージを持たない別のdivを持っていますが、それらは整列していません。私のhtmlは最後のものを除いてすべてのdivの半分を示しています。 demoに問題が示されていますが、悪くはありません。

HTML：

<div class="profile-pics"> 
    <div class="pic-thumb-box"><img src="http://i.imgur.com/EclNgPI.jpg" class="pic-thumb" /></div> 
    <div class="pic-thumb-box"><span class="pic-thumb"></span></div> 
</div> 

CSS：

.profile-pics { 
    white-space: nowrap; 
    overflow: hidden; 
    vertical-align: top 
} 
.pic-thumb-box { 
    width: 250px; 
    height: 250px; 
    border: 1px solid; 
    background: #555; 
    display: inline-block; 
    position:relative; 
} 
.pic-thumb { 
    width: 240px; 
    height: 240px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
} 

Answer 1

あなた.PIC-親指{....}に

display: inline-block; 

を追加します。 これを修正します

Answer 2

この動作の理由は、.pic-thumb-boxの要素に異なる種類の要素が含まれているためです（）。 <img>要素はデフォルトでinline-blockの表示として動作しますが、<span>要素はinlineのように表示されます。これにより、クラスが<span>要素に幅と高さを適用できなくなります。別の回答に示すように.pic-thumbクラスにdisplay: inline-block;を追加すると、<span>要素に高さと幅を適用して、不揃いを修正できます。

Answer 3

imgの周りのスペースを削除するには、「display：inline-block;」を追加します。 .pic-thumbクラスに追加します。

.pic-thumb { 
    width: 240px; 
    height: 240px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
    display: inline-block; 
} 

はhttps://jsfiddle.net/mxevk9q6/2/

よろしくアンディ