행 상자 기준선의 위치는 행의 모든 요소에 영향을 받습니다.
왜 첫 번째 상자와 세 번째 상자는 같은 효과가 있지만 두 번째 상자와 네 번째 상자는 다른 효과가 있습니다. 수직 정렬 속성은 선 상자의 기준선을 어떻게 변경합니까?
간단히 말하면 짧은 상자는 상위 콘텐츠 상자 위로 돌출되지만 상위 콘텐츠 상자 아래로는 돌출되지 않기 때문입니다.
다음은 관련 상자와 줄이 추가된 이미지입니다:
각 경우에 녹색 직사각형은 선 상자의 위치를 나타내고, 파란색 직사각형은 상위 콘텐츠 상자의 위치를 나타내며, 빨간색 선은 기준선의 위치를 나타냅니다.
이제 사례 1과 3의 경우 키가 큰 상자가 각각 text-bottom 和 bottom로 정렬되고 상위 콘텐츠 상자의 아래쪽과 줄 상자의 아래쪽이 일치하는 것을 볼 수 있습니다. 따라서 각각의 정렬은 동일한 배열로 해석됩니다.
text-bottom
bottom
2번과 4번의 경우 키가 큰 상자가 각각 text-top 和 top로 정렬되어 있고 상위 콘텐츠 상자의 상단과 줄 상자의 상단이 일치하지 않으므로 레이아웃이 동일하지 않습니다. p>
text-top
top
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
간단히 말하면 짧은 상자는 상위 콘텐츠 상자 위로 돌출되지만 상위 콘텐츠 상자 아래로는 돌출되지 않기 때문입니다.
다음은 관련 상자와 줄이 추가된 이미지입니다:
각 경우에 녹색 직사각형은 선 상자의 위치를 나타내고, 파란색 직사각형은 상위 콘텐츠 상자의 위치를 나타내며, 빨간색 선은 기준선의 위치를 나타냅니다.
이제 사례 1과 3의 경우 키가 큰 상자가 각각
text-bottom和bottom로 정렬되고 상위 콘텐츠 상자의 아래쪽과 줄 상자의 아래쪽이 일치하는 것을 볼 수 있습니다. 따라서 각각의 정렬은 동일한 배열로 해석됩니다.2번과 4번의 경우 키가 큰 상자가 각각
text-top和top로 정렬되어 있고 상위 콘텐츠 상자의 상단과 줄 상자의 상단이 일치하지 않으므로 레이아웃이 동일하지 않습니다. p>