html - div 要素は、テキストが含まれている場合に押し下げられます。インラインブロック特有の挙動

Question

子にテキストが含まれている場合、最初の要素が押し下げられるのはなぜですか? インラインブロックがこのように動作するのはなぜですか?

また、div に子を持たせながら、div を並べて配置するにはどうすればよいでしょうか? 灰色のボックスに、要素のリストを上下に並べたまま、すべてをこのように整列させたい(ボックスに子が含まれていない場合は正常に機能します):

例はここにあります: http://jsfiddle.net/uwRwM/1/

.box {
display: inline-block;
}

Answer 1

簡単に修正。を追加しoverflow:hiddenます。

これにより、要素にテキストが含まれるようになります。

.box {
    overflow:hidden;
}

動作中の jsFiddle デモ

または、設定することもできますvertical-align:top。

.box {
    vertical-align:top;
}

動作中の jsFiddle デモ

これが発生する理由は、inline-block要素のデフォルトの垂直方向の配置がbaseline. したがって、それが底にあった理由。