텍스트 영역과 인접 요소 정렬의 불일치: 자세한 설명

외관에도 불구하고 코드 조각의 텍스트 영역 요소는 더 높은 위치에 배치되지 않습니다. 이웃인 스팬 요소보다 이러한 시각적 환상은 기준선 정렬로 알려진 웹 레이아웃의 기본 측면에서 발생합니다.

기준선 정렬 및 디센더

범위 및 텍스트 영역과 같은 인라인 요소가 렌더링됩니다. 대부분의 캐릭터가 놓이는 선인 동일한 기준선에 있습니다. 그러나 디센더라고 알려진 특정 소문자는 기준선 아래로 확장됩니다.

귀하의 경우에는 범위 및 텍스트 영역 요소 모두 렌더링에서 잠재적인 디센더를 수용합니다. 관찰된 간격은 단순히 이러한 디센더를 위해 예약된 공간입니다.

오정렬 환상

오류가 감지되는 것은 범위 요소와 텍스트 영역 요소 간의 테두리 처리 차이에서 비롯됩니다. 범위의 테두리는 텍스트와 디센더 공간을 감싸지만 텍스트 영역의 테두리는 그렇지 않습니다. 이로 인해 텍스트 영역이 더 높은 것처럼 보입니다.

가능한 해결 방법

이 시각적 불일치를 해결하려면 다음 중 하나를 수행할 수 있습니다.

• 텍스트 영역 규칙에 수직 정렬: 하단 추가: 이는 텍스트 영역의 하단 가장자리를 범위의 하단 가장자리와 정렬합니다.
• 텍스트 영역 규칙에 디스플레이: 블록 추가: 이는 인라인 동작을 제거하고 텍스트 영역을 블록 요소로 처리하여 기준선 정렬 효과를 제거합니다.