다른 브라우저에서 텍스트 영역 아래에 추가 공간이 나타나는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-11-04 09:38:01

원래의

619명이 탐색했습니다.

Why Does Extra Space Appear Below Textareas in Different Browsers?

텍스트 영역 아래 추가 공간: 브라우저의 차이 발견

텍스트 영역 요소 아래에 추가 공간이 있으면 다양한 문제가 발생할 수 있습니다. 브라우저마다 크기가 다릅니다. 마크업의 단순성에도 불구하고 이러한 불일치는 계속됩니다.

원인을 규명하고 해결책을 제공하기 위해 기본 코드를 자세히 살펴보겠습니다.

<code class="html"><html>
    <head>
        <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>
    </head>
    <body>
        <div class="main">
            <textarea></textarea>
        </div>
    </body>
</html></code>

로그인 후 복사

제공된 스크린샷에 표시된 대로 브라우저는 텍스트 영역 아래에 이 추가 공간을 다르게 표시합니다. 이러한 불일치를 해결하려면 해결책은 다음 CSS 속성을 추가하는 것입니다.

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

로그인 후 복사

이러한 차이의 근거는 인라인 또는 인라인 블록 요소인 텍스트 영역의 특성과 관련이 있습니다. 브라우저는 기준선 아래로 확장되는 문자인 디센더를 수용하기 위해 그 아래 공간을 예약합니다. 안타깝게도 브라우저마다 간격 크기가 달라지는 정확한 이유는 아직 파악하기 어렵습니다.

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