ライン ボックスのベースラインの位置は、ライン内のすべての要素の影響を受けます。
1 番目のボックスと 3 番目のボックスの効果は同じですが、2 番目のボックスと 4 番目のボックスの効果は異なるのはなぜですか。垂直方向の配置プロパティはライン ボックスのベースラインをどのように変更しますか?
つまり、ショート ボックスは親コンテンツ ボックスの上にははみ出していますが、親コンテンツ ボックスの下にははみ出していないためです。
これは、関連するボックスと行が追加された画像です:
いずれの場合も、緑色の四角形はライン ボックスの位置を示し、青色の四角形は親コンテンツ ボックスの位置を示し、赤色の線はベースラインの位置を示します。
これで、ケース 1 と 3 では、背の高いボックスがそれぞれ text-bottom と bottom (親コンテンツ ボックスの下部とコンテンツ ボックスの下部) に揃えられていることがわかります。ラインボックスが一致します。したがって、それぞれの配置は同じ配置になります。
text-bottom
bottom
ケース 2 と 4 では、トール ボックスはそれぞれ text-top と top に揃えられます。親コンテンツ ボックスの上部と行ボックスの上部は一致しません。一致するため、レイアウトは同じではありません。 p>
text-top
top
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
つまり、ショート ボックスは親コンテンツ ボックスの上にははみ出していますが、親コンテンツ ボックスの下にははみ出していないためです。
これは、関連するボックスと行が追加された画像です:
いずれの場合も、緑色の四角形はライン ボックスの位置を示し、青色の四角形は親コンテンツ ボックスの位置を示し、赤色の線はベースラインの位置を示します。
これで、ケース 1 と 3 では、背の高いボックスがそれぞれ
text-bottomとbottom(親コンテンツ ボックスの下部とコンテンツ ボックスの下部) に揃えられていることがわかります。ラインボックスが一致します。したがって、それぞれの配置は同じ配置になります。ケース 2 と 4 では、トール ボックスはそれぞれ
text-topとtopに揃えられます。親コンテンツ ボックスの上部と行ボックスの上部は一致しません。一致するため、レイアウトは同じではありません。 p>