내 TextArea가 인접 범위보다 높게 나타나는 이유는 무엇입니까?

내 TextArea가 이웃 요소보다 높은 이유는 무엇입니까?

textarea 요소가 이웃 범위 요소보다 더 높은 위치에 있는 것처럼 보일 수 있습니다. , 실제로는 그렇지 않습니다.

기준선 정렬

span 및 textarea 요소는 모두 인라인 요소입니다. 브라우저는 기준선 아래로 확장되는 소문자인 디센더를 수용하기 위해 인라인 요소 아래에 공간을 제공합니다. 이 공백을 사용하면 같은 줄에 있는 모든 요소가 기준선에 정렬됩니다.

TextArea의 기능

TextArea 요소는 일반적으로 디센더를 위한 공간이 필요하지 않습니다. 포장 상자. 그러나 브라우저는 인접한 텍스트나 요소가 같은 줄을 공유할 가능성을 허용하기 위해 여전히 이 공간을 제공합니다.

시각적 환상

제공된 예에서 잘못된 정렬의 환상 요소 주변의 경계로 인해 더욱 악화됩니다. 텍스트 영역 주변의 빨간색 테두리는 디센더 공간을 제외하고, 범위 요소 주변의 파란색 테두리는 텍스트와 디센더 공간을 모두 포함합니다. 빨간색 테두리를 제거하면 인식된 오정렬이 줄어듭니다.

해결책

인식된 오정렬을 수정하려면 다음 해결 방법 중 하나를 선택할 수 있습니다.

1. textarea CSS 규칙에 수직 정렬: 하단을 추가하면 텍스트 영역이 해당 규칙의 하단에 정렬됩니다. 컨테이너.
2. textarea CSS 규칙에 display: block을 추가하면 전체 높이의 블록 요소로 변환됩니다.

위 내용은 내 TextArea가 인접 범위보다 높게 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!