하위 요소의 수직 정렬이 CSS의 상위 정렬에 영향을 미치는 이유는 무엇입니까?

CSS의 수직 정렬 동작

vertical-align 속성을 사용할 때 한 요소에 적용하면 결과에 영향을 미칠 수 있다는 것은 예상치 못한 일입니다. 근처에 있는 다른 요소의 정렬. 이는 반드시 버그나 오류가 아니라 속성 작동 방식의 결과입니다.

CSS에서 수직 정렬은 주변 요소를 기준으로 요소의 수직 정렬을 정의합니다. 과 같은 인라인 요소에 적용하면 일반적으로

와 같은 블록 수준 요소인 상위 요소 내에서 요소를 수직으로 정렬합니다. 또는

.

제공된 예에서 요소의 수직 정렬 값은 중간입니다. 이는 해당 요소가 상위

내에서 수직으로 중앙에 위치해야 함을 나타냅니다. 요소. 그러나 요소에 높이가 정의되어 있으면

내에서 할당된 전체 공간을 차지하여 효과적으로 상위 요소를 아래로 밀어냅니다.

상위

요소는 노란색 배경을 가지며, 이 차지하는 공간을 채우기 위해 확장됩니다.

블록 수준 요소인 경우 전체 블록을 컨테이너 내에서 수직으로 정렬합니다.

따라서 콘텐츠는 세로로 정렬되지 않고 전체

에 적용된 수직 정렬로 인해 요소가 정렬되었습니다. 어린이. 이는 주어진 상황에서 수직 정렬의 예상되는 동작입니다.

위 내용은 하위 요소의 수직 정렬이 CSS의 상위 정렬에 영향을 미치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css Error using Property this background bug Other

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.