結構ながびいいてしまいましたが、やっと風邪が治った感じです。
さて、相変わらずバイト先でYii2を使っているのですが、めちゃくちゃ嵌ってしまった問題があったのでメモしておきます。
今回嵌ったのは、実体のないinline-blockがあると、text-topとtext-bottomがそのinline-blockの下端に設定されてしまうという現象です。
inline-blockに実体がある場合
実体(以下では"bbb")がある場合には、
aaa <div style="height: 100px; width: 50px; display:inline-block; background: yellow"> bbb </div>
このように、実体の方のtext-topとtext-bottomが使用されます。
実体がない場合
実体がない場合("bbb"を削除)、
aaa <div style="height: 100px; width: 50px; display:inline-block; background: yellow"> </div>
後ろの方にあるinline-blockの下端の場所に"aaa"が表示されます。"aaa"のvertical-alignを色々と変えてみると、topとbottomは上端と下端に動きますが、それ以外はbaseline変わりません。
float属性は実体にならない
さらに、これだけだったら理解できたのですが、float属性のものしかないと実体がないと解釈されるようです。
aaa <div style="height: 100px; width: 50px; display:inline-block; background: yellow"> <div style="float: left"> bbb </div> </div>
このように、floatの要素だけしかないinline-blockだと、
というわけのわからない状態になります。