텍스트 영역 아래의 추가 공간, 브라우저에 따라 다름

Question 1

textarea 태그 아래에 추가 공간이 있습니다. 다른 브라우저에서 1 ~ 4 픽셀. 마크 업은 매우 간단합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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>

브라우저에서 렌더링되는 방법은 다음과 같습니다.

스크린 샷

왜 이런 일이 발생합니까? 이 여분의 공간을 제거하는 방법은 무엇입니까?

Question 2

추가 vertical-align: top에 textarea.

간격의 이유 textarea는 inline(또는 inline-block) 요소이고 간격은 텍스트의 디 센더 용으로 예약 된 공간 입니다. 브라우저마다 차이가 왜 다른지 정확히 모르겠습니다.

Question 3

제 경우에는 thirtydot 의 대답이 부모 <div>의 아래쪽 테두리 와 잘 맞지 않았습니다 .

display: block 그래도 나에게 잘 어울렸다.