inline-blockをネストすると表示がずれる

質問

DIVタグをベタベタならべて、あとはcssでサイズや属性を指定してページをレイアウトしようとしています。しかし、inline-block指定をネストすると表示が急にずれることに気づきました。

まず３つのdivタグを並べます。inline-blockを指定することで横に並べます。
例えば次のようなものです。

■■■▲▲▲●●●
■■■▲▲▲●●●
■■■▲▲▲●●●

後の説明の都合上、３×３の大きさで描いていますが、■/▲/●がそれぞれ一つのDIVに対応していて
<DIV id="■"></DIV>
<DIV id="▲"></DIV>
<DIV id="●"></DIV>
となっていて、cssで適当なサイズが指定されていると考えてください。

ここで、▲を縦に３つに分けるために、<DIV id="▲"></DIV>のなかにネストしたDIVタグを３つ挿入します。

<DIV id="■"></DIV>
<DIV id="▲">
　　<DIV id="□"></DIV>
　　<DIV id="△"></DIV>
　　<DIV id="○"></DIV>
</DIV>
<DIV id="●"></DIV>

■■■□□□●●●
■■■△△△●●●
■■■○○○●●●

このように▲の中に□/△/○の３つのdivを置いて分割します。縦に並べるため、今度は□/△/○にinline-blockを指定していません。

更にこの△の部分を、今度は横に３分割することを考えます。つまり、<DIV id="△"></DIV>の中に
<DIV id="◆"></DIV><DIV id="◇"></DIV><DIV id="▼"></DIV>
を挿入します。今度は横並びにしたいので、◆/◇/▼はcssファイルでinline-blockを指定します。

期待している表示は、

■■■□□□●●●
■■■◆◇▼●●●
■■■○○○●●●

なのですが、実際には

■■■＿＿＿●●●
■■■□□□●●●
■■■◆◇▼●●●
＿＿＿○○○＿＿＿

（＿＿＿は空白）

のように真ん中のDIVが下にずれて表示されてしまいます。
試行錯誤した結果、どうやら外側のinline-blockの底辺と、内側のinline-blockの底辺とを一致させようとするロジックが働いているように見えます。

この現象はchrome/firefox/safariのいずれでも同じでした。
ということは、この動作はhtml/cssで規定されている動作でしょうか？
それとも、たまたますべてのブラウザで同じような実装上の不具合がある、と考えるべきでしょうか？

ちょっと分かりにくいかも知れませんが、ご存じの方、コメントをよろしくお願いします。

回答No.1

dscripty

ちょっとわかりにくいんだけど、vertical-align:baseline の正しい動きだよ。

http://www.w3.org/TR/CSS2/visudet.html#line-height

お礼

ありがとうございます。
まず、vertial-alignがデフォルトでbaselineになっていることは承知しています。
その上で、ご呈示いただいたURLをちょっと読んでみました。

今回例示したケースでは、ネストした<DIV>タグの外側のvertical-alignと内側のvertical-alignまで同一の位置に合わせようとしている（ように見える）のが、ちょっと不可解です。

<DIV>hoge</DIV><DIV>foo</DIV><DIV>bar</DIV>

と描いた３つのDIVにdisplay:inline-block;を指定すればbaselineが揃って横並びになるのは当たり前です。

真ん中の<DIV>foo</DIV>のfooの代わりに、<DIV></DIV>を入れ子にして何個か入れたとき、入れ子にした<DIV>をinline-blockにすると、外側の<DIV>hoge</DIV>とかと同じ垂直位置に合わせられるのが仕様なのかどうか、先のURLを読んでみてもまだはっきりしません（というか理解しづらい）。

おそらく「行」（というか「インライン要素」）の厳密な定義が理解できていないのが原因だと思います。もう少し調べてみますが、何かおわかりでしたら引き続きよろしくお願いします。