なぜインラインブロックdivが互いに不均一に整列するのですか？

Question

2つの位置をどのようにしてinline-blockdivをheight属性と同じ行にすることができますか？

が期待：

#legendと#containerが同じ行にあるべきです。実際

は：

#legend#container後くらいに位置しています。一方

div { 
 
    display: inline-block; 
 
} 
 

 
#legend { 
 
    height: 500px; 
 
    border: solid red; 
 
} 
 

 
#container { 
 
    height: 500px; 
 
    width: 500px; 
 
    border: solid green; 
 
}

<div id="legend"> 
 
    <p>Lorem</p> 
 
</div> 
 
<div id="container"></div>

Fiddle

、我々は height属性を入れていない場合は、それ works fine。

Answer 1

インラインレベル要素の初期設定はvertical-align: baselineです。つまり、デフォルトのdisplayの値がinlineであるspan,textareaおよびimgなどの要素は、コンテナのベースラインにアライメントされます。

baseline

ほとんどの文字は「座る」とディセンダーが延びる以下の時にライン。

^{出典：あなたの質問にWikipedia.org}

、あなたはdisplay: inline-blockにdivを設定しています。これによりベースラインアライメントがアクティブになり、ボックスは互いのベースラインに対して垂直に整列します。それはあなたが見ているものです。

vertical-alignのデフォルト値を上書きすることで問題を解決できます。

div { 
 
    display: inline-block; 
 
    vertical-align: bottom; /* new */ 
 
} 
 

 
#legend { 
 
    height: 500px; 
 
    border: solid red; 
 
} 
 

 
#container { 
 
    height: 500px; 
 
    width: 500px; 
 
    border: solid green; 
 
}

<div id="legend"> 
 
    <p>Lorem</p> 
 
</div> 
 
<div id="container"></div>

OR、（vertical-alignはまださえ合わせて完全に便利になるかもしれないが）単に空のdivにいくつかのテキストを置く：これを試してみてください。

div { 
 
    display: inline-block; 
 
} 
 

 
#legend { 
 
    height: 500px; 
 
    border: solid red; 
 
} 
 

 
#container { 
 
    height: 500px; 
 
    width: 500px; 
 
    border: solid green; 
 
}

<div id="legend"> 
 
    <p>Lorem</p> 
 
</div> 
 
<div id="container">text text text</div>