Chrome이나 Firefox 같은 브라우저에서 textarea를 사용할 때 분명 margin-bottom은 0인데 4px정도의 여백이 생기는 경우가 있습니다. 왜 여백이 생기는지, 그리고 어떻게 없앨 수 있는지 알아보겠습니다.
우선 기본적인 textarea를 하나 만들고 파란색 배경색을 가진 div로 감싸주었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="wrapper">
<textarea class="default">default textarea</textarea>
</div>
</body>
</html>
.wrapper {
width: max-content;
background-color: cornflowerblue;
}
.default {
box-sizing: border-box;
height: 40px;
}
😈문제
위에 만들어진 textarea와 div를 살펴보면 div 영역이 조금 아래로 빠져 나온 것을 확인할 수 있습니다. 따로 margin-bottom을 주지도 않았는데 말이죠.
개발자 도구를 사용하여 두 영역의 높이를 살펴보겠습니다.
보이는 것과 같이 textarea를 감싸고 있는 div가 textarea의 높이보다 약 4px정도 더 높게 잡힌 것을 확인할 수 있습니다.
🧐원인이 무엇일까?
mdn의 textarea 문서를 보면 다음 내용이 실려있습니다.
간략히 정리하면 textarea는 대체 요소이며, HTML 명세에 textarea의 baseline이 정의되어 있지 않다고 합니다. 따라서 브라우저별로 다르게 위치할 수 있다는 거죠. 동작을 예측할 수 없기 때문에 vertical-align: baseline을 사용하지 말라고 경고하고 있습니다.
기본적으로 vertial-align 값은 baseline이기 때문에 각 브라우저에서 정의한 baseline 동작에 따라 위치가 바뀌게되는 것입니다.
😇해결법!
아래의 여백을 없애는 간단한 방법이 여러가지 있습니다.
1. display: block으로 지정하기
vertical-align은 인라인, 인라인 블록 및 테이블 셀 요소에만 적용되므로 블록 레벨 요소를 수직으로 정렬하는 데 사용할 수 없습니다. 따라서 textarea를 block 요소로 바꾸면 vertical-align 속성이 해제되어 여백이 없어집니다.
.block {
display: block;
}
2. vertical-align 조정하기
vertical-align의 기본값이 baseline이므로, vertical-align에 top이나 bottom 값을 줘서 여백을 없앨 수 있습니다.
.bottom {
vertical-align: bottom;
}
포스팅에 사용된 예제는 깃허브에 정리해두었습니다 : https://github.com/huewilliams/velog-examples/tree/main/textareaBaseline
감사합니다! 덕분에 해결됐어요!