コンテンツが追加されたときにdiv要素が増加する

Question

私はメインラッパーdivと内部にいくつかのインラインブロックコンテンツdivがあります。何らかの理由で、私の右下のコンテンツdivが空であるとき、それは下げられた位置にあります。そして、ボタンと入力要素を追加すると、正しい位置に移動します。この動作は、 https://jsfiddle.net/ywbyLdcn/3/をここで再作成して、 'outer4' divの内側のdivの内容を削除し、それを下に見てください。

要素（ボタン）のいずれかが挿入されたので、私はこれが起こっている感じを持っているが、それに詰め物を持っていますが、私はわからない：

button { 
    margin-right: 5px; 
    padding: 5px 10px 5px 10px; 
} 

は、誰もがなぜこれが起こっている私が把握助けてください？注：私は実際には、それが空であるときに、ラインから外れている上げた位置にしたい。

Answer 1

これに対する1つの迅速な解決策は、次のルールを追加することです：

#wrap div { 
    vertical-align: top; 
} 

これは、あなたの#wrap内のすべてのdivを選択し、それらの代わりにデフォルトの「ベースライン」の、先頭に合わせることができます。 vertical-align、here、hereについて詳しく読む。私はまだそれが起こっている理由は好奇心が強いものの、間違いなく、低下のdiv問題を修正し

Fiddle