なぜverticalalign:textbottomとverticalalign:bottomは同じ効果があるのですか?

Question

ライン ボックスのベースラインの位置は、ライン内のすべての要素の影響を受けます。

リーリー リーリー

1 番目のボックスと 3 番目のボックスの効果は同じですが、2 番目のボックスと 4 番目のボックスの効果は異なるのはなぜですか。垂直方向の配置プロパティはライン ボックスのベースラインをどのように変更しますか?

Answer 1

つまり、ショート ボックスは親コンテンツ ボックスの上にははみ出していますが、親コンテンツ ボックスの下にははみ出していないためです。

---

これは、関連するボックスと行が追加された画像です:

いずれの場合も、緑色の四角形はライン ボックスの位置を示し、青色の四角形は親コンテンツ ボックスの位置を示し、赤色の線はベースラインの位置を示します。

これで、ケース 1 と 3 では、背の高いボックスがそれぞれ text-bottom と bottom (親コンテンツ ボックスの下部とコンテンツ ボックスの下部) に揃えられていることがわかります。ラインボックスが一致します。したがって、それぞれの配置は同じ配置になります。

ケース 2 と 4 では、トール ボックスはそれぞれ text-top と top に揃えられます。親コンテンツ ボックスの上部と行ボックスの上部は一致しません。一致するため、レイアウトは同じではありません。