다양한 브라우저에서 텍스트 영역 아래의 추가 공간을 제거하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-04 20:08:02
원래의
535명이 탐색했습니다.

How to Eliminate Extra Space Below Textareas in Different Browsers?

브라우저의 텍스트 영역 아래 추가 공간

HTML에서 텍스트 영역은 하단에 추가 공간을 표시할 수 있으며, 이 공간은 브라우저마다 높이가 다릅니다. . 이 간격은 잠재적인 텍스트 디센더를 위한 공간을 나타내기 때문에 텍스트 영역의 인라인 또는 인라인 블록 특성으로 인해 발생합니다.

이 추가 공간을 제거하려면 CSS 속성 "vertical-align: top"을 적용해야 합니다. 텍스트 영역 요소. 이 속성은 텍스트 영역의 기준선이 주변 요소의 상단과 정렬되도록 하여 간격을 효과적으로 제거합니다.

다음 수정된 HTML 및 CSS 코드는 해결책을 보여줍니다.

<code class="html"><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;
        vertical-align: top;
    }
</style></code>
로그인 후 복사

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿