47歳でやむなくセミリタイア

病気のためセミリタイアをすることに。現在は週20時間程度のバイトをしています。その他、雑多なことを記録として書いています。

Yii2の使い方: cssで嵌ったのでメモ

結構ながびいいてしまいましたが、やっと風邪が治った感じです。

さて、相変わらずバイト先で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>

f:id:ekutajp:20191115202747p:plain
このように、実体の方の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変わりません。
f:id:ekutajp:20191115202311p:plain

float属性は実体にならない

さらに、これだけだったら理解できたのですが、float属性のものしかないと実体がないと解釈されるようです。

aaa
<div style="height: 100px; width: 50px; display:inline-block; background: yellow">
  <div style="float: left"> bbb </div>
</div>

このように、floatの要素だけしかないinline-blockだと、
f:id:ekutajp:20191115203354p:plain
というわけのわからない状態になります。

結論

最初はブラウザによるのかと思ったのですが、ChromeIE、Edgeと皆同じなので、こういう仕様のようです。
この場合、"aaa"のstyleに、"vertical-align: top"をつけて、line-heightなどで位置を調整するようにすれば良さそうです。
とりあえずは、inlineブロックの下端に表示されている場合には、中身のないinline-blockではないかと疑うことにします。