브라우저에서 텍스트 영역 아래에 추가 공간이 있는 이유는 무엇입니까?

브라우저에서 텍스트 영역 아래 추가 공간 제거

텍스트 영역 HTML 요소를 활용하면 그 아래에 크기가 다양한 원하지 않는 추가 공간이 나타날 수 있습니다. 브라우저에 따라 1~4픽셀입니다. 간단한 마크업을 사용했음에도 불구하고 이 문제는 지속됩니다.

`

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .main {
        background-color: red;
    }
    textarea {
        background-color: gray;
        resize: none;
        margin: 0;
        border: 0 none;
        padding: 10px;
        height: 50px;
        overflow: hidden;
    }
</style>

<div class="main">
    <textarea></textarea>
</div>

`

이 마크업은 다양한 브라우저에서 렌더링될 때 텍스트 영역 아래에 추가 공간을 표시합니다. 이 문제를 해결하려면 인라인 요소로서 텍스트 영역이 텍스트의 디센더를 위한 공간을 예약한다는 점을 이해해야 합니다. 그러나 브라우저 간 간격이 다양한 정확한 이유는 아직 알려지지 않았습니다.

이 추가 공간을 효과적으로 제거하려면 수직 정렬: 상단; CSS의 텍스트 영역으로:

<code class="css">textarea {
    ...
    vertical-align: top;
    ...
}</code>

이 수정을 구현하면 텍스트 영역이 상위 요소의 상단에 정렬되어 원하지 않는 공간이 효과적으로 제거됩니다.

위 내용은 브라우저에서 텍스트 영역 아래에 추가 공간이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!