'수직 정렬'이 대상 인라인 블록 요소뿐만 아니라 형제 요소에도 영향을 미치는 이유는 무엇입니까?

자기가 아닌 수직 정렬 정렬 형제

수직 정렬을 이해하는 것은 예상만큼 간단하지 않습니다. 예에서 알 수 있듯이 예기치 않게 인라인 블록 에만 수직 정렬을 적용합니다. 을 제외한 모든 항목을 수직으로 정렬합니다. 콘텐츠 그 자체. 이것이 의도된 동작인가요?

예상대로 수직 정렬은 상위 컨테이너 내 요소의 수직 정렬을 정의합니다. 콘텐츠가 정렬되면 브라우저는 p 상위 요소와 내의 텍스트를 포함한 모든 요소를 ​​정렬합니다.

정렬 없이 해당 내용은 브라우저에 의해 동일한 높이로 렌더링되고 p의 상단에 수직으로 정렬됩니다.

vertical-align: middle을 p 내의 모든 요소의 수직 정렬을 변경합니다. 이제 p 자체는 높이의 중간점과 수직으로 정렬되고 위쪽에 정렬된 상태를 유지하며 수직으로 정렬되지 않은 것처럼 나타납니다.

위 내용은 '수직 정렬'이 대상 인라인 블록 요소뿐만 아니라 형제 요소에도 영향을 미치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!