수직정렬:텍스트하단과 수직정렬:하단이 동일한 효과를 갖는 이유는 무엇입니까?

Question

행 상자 기준선의 위치는 행의 모든 ​​요소에 영향을 받습니다.

으아아아 으아아아

왜 첫 번째 상자와 세 번째 상자는 같은 효과가 있지만 두 번째 상자와 네 번째 상자는 다른 효과가 있습니다. 수직 정렬 속성은 선 상자의 기준선을 어떻게 변경합니까?

Answer 1

간단히 말하면 짧은 상자는 상위 콘텐츠 상자 위로 돌출되지만 상위 콘텐츠 상자 아래로는 돌출되지 않기 때문입니다.

---

다음은 관련 상자와 줄이 추가된 이미지입니다:

각 경우에 녹색 직사각형은 선 상자의 위치를 ​​나타내고, 파란색 직사각형은 상위 콘텐츠 상자의 위치를 ​​나타내며, 빨간색 선은 기준선의 위치를 ​​나타냅니다.

이제 사례 1과 3의 경우 키가 큰 상자가 각각 text-bottom 和 bottom로 정렬되고 상위 콘텐츠 상자의 아래쪽과 줄 상자의 아래쪽이 일치하는 것을 볼 수 있습니다. 따라서 각각의 정렬은 동일한 배열로 해석됩니다.

2번과 4번의 경우 키가 큰 상자가 각각 text-top 和 top로 정렬되어 있고 상위 콘텐츠 상자의 상단과 줄 상자의 상단이 일치하지 않으므로 레이아웃이 동일하지 않습니다. p>