'수직 정렬'이 대상 요소보다 더 많은 영향을 미치는 이유는 무엇입니까?

수직 정렬: 예상치 못한 이해

수직 정렬 기능을 살펴보던 중 특이한 현상에 직면하게 됩니다. 이론적으로, 과 같은 인라인 요소에 수직 정렬을 적용하면 해당 요소만 정렬되어야 합니다. 그러나 실제로는 포함하는

와 같은 다른 요소도 세로로 정렬되어 있는 것처럼 보입니다.

예상되는 동작인가요 아니면 다른 것인가요?

이 동작은 실제로 예상되는 결과입니다. 수직 정렬은 라인 상자 내의 요소 정렬을 지정합니다. 특정 요소에 적용하면 해당 요소 내용의 위치만 조정하는 것이 아니라 전체 줄의 전체적인 정렬에 영향을 줍니다.

세로 정렬 메커니즘

수직 정렬을 지정하지 않으면 요소는 기준선을 기준으로 정렬됩니다. 수직 정렬이 도입되면 선 상자 내에 새로운 참조선이 설정됩니다. 정렬되지 않은 요소는 이 참조선에 정렬되고, 정렬된 요소는 위 또는 아래에 배치됩니다.

제공된 예에서:

• 및 고유한 정렬이 없습니다.

• 에 수직 정렬을 적용하면 높이 중간에 새로운 참조선이 설정됩니다.

• 이 참조선에 정렬되어 해당 텍스트가 옆에 표시되도록 상승합니다.

• 의 텍스트는 참조선보다 낮은 자체 기준선에 맞춰 정렬된 상태로 유지됩니다. 결과적으로

  의 텍스트 아래에 텍스트가 나타납니다.

결론

이 시나리오에서 관찰된 예상치 못한 정렬은 버그가 아닙니다. 오히려 수직 정렬의 의도된 효과입니다. 라인 상자 내에 참조 라인을 설정함으로써 수직 정렬은 명시적으로 지정되지 않은 요소를 포함하여 해당 라인 내의 모든 요소가 서로 수직으로 정렬되도록 합니다.

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