CSSのインラインブロックラップの混在したテキストと空のdivの問題

Question

display: inline-blockが設定されている場合、div（空白またはテキストが混在しています）の配置問題があります。例えば、以下の画像を参照してください：あなたが見ることができるように

、テキストとdiv sが何とかdiv秒の残りの部分と一致していません。私の問題の実際の例については、this JSFiddleを参照してください。

私はすでにこの問題を解決するいくつかの方法を知っていますが、なぜそれが起こるのか理解したいと思います。私の目標は、CSSの変更を最小限に抑えてこの問題を解決することです（HTMLを変更しなくても可能です）。

HTML

<div class="bar"> 
    <div class="actors"> 
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> 
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> 
    <div class="actor num"><span>5</span></div> 
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> 
    <div class="actor num"><div>6</div></div> 
    </div> 
    <div class="lol">lol</div> 
</div> 

CSS

.bar { 
    height: 40px; 
    border-bottom: 1px solid #000; 
} 
.actors { 
    float: left; 

} 
.actor { 
    display: inline-block; 
    width: 34px; 
    height: 34px; 

    background-color: gray; 
    border-radius: 16px; 
    border: 1px solid red; 
} 
.num { 

} 
.lol { 
    float: right; 
} 

Answer 1

理由はvertical-alignのデフォルト値は、すべてのテキストがあります。初期値はbaselineであり、方向はベースライン上にあります。

それを修正する最も簡単なと賢い方法はvertical-align: top;にそれを設定することです：

.actor { 
    vertical-align: top; 
} 

デモ：JSFiddle

Answer 2

私は

.actor { 
    vertical-align: middle; 
} 

トップここにあなたの問題を修正使用することを好むだろうそれはそれらをすべてラインの上に押し込む。ボトムは反対です。技術的に言えば、どちらの方法でも整列しています。だから、それ以上の衝突を防ぐために、真ん中にそろえてみてはどうでしょうか。

JFiddle