반응형
텍스트 영역 아래의 추가 공간, 브라우저에 따라 다름
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>
브라우저에서 렌더링되는 방법은 다음과 같습니다.
왜 이런 일이 발생합니까? 이 여분의 공간을 제거하는 방법은 무엇입니까?
추가 vertical-align: top에 textarea.
간격의 이유 textarea는 inline(또는 inline-block) 요소이고 간격은 텍스트의 디 센더 용으로 예약 된 공간 입니다. 브라우저마다 차이가 왜 다른지 정확히 모르겠습니다.
제 경우에는 thirtydot 의 대답이 부모 <div>의 아래쪽 테두리 와 잘 맞지 않았습니다 .
display: block 그래도 나에게 잘 어울렸다.
참고 URL : https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers
반응형
'code' 카테고리의 다른 글
| 독일어 키보드의 줄 주석 단축키 (0) | 2020.11.17 |
|---|---|
| API 23의 Android 권한 일반 권한 및 위험한 권한 목록? (0) | 2020.11.17 |
| 2048KB의 SQLite Android 데이터베이스 커서 창 할당 실패 (0) | 2020.11.16 |
| Android에서 파일 경로를 Uri로 변환 (0) | 2020.11.16 |
| “ 'aclocal-1.15'is missing on your system”경고를 극복하는 방법은 무엇입니까? (0) | 2020.11.16 |