다양한 브라우저에서 텍스트 영역 아래의 추가 공간을 제거하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-04 20:08:02

원래의

570명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!