인프런 커뮤니티 질문&답변
작성한 질문수
배경 이미지 풀스크린 검색창: 글자를 입력했을 때, input 요소끼리 서로 틀어집니다
작성
·
539
답변 4
8
아직 공부하고 계실지 모르겠지만, 다른분들도 보실 것 같아서 제가 해결한 방법 공유드립니다.
저도 왜 그런지는 자세히 모르겠지만 font-size, font-family 한글/영어에 따라서 어긋나는 정도가 달라 아마도 font 자체가 가지는 matrix 값이 달라서 발생하는 문제로 추측해봤습니다. 관련 내용에 도움되는 참고 사이트 공유 드립니다. https://wit.nts-corp.com/2017/09/25/4903
결론적으로 , font 마다 가지고 있는 고유의 공간 값이 다른데 입력시 vertical-line이 baseline으로 기본값이 설정되어 있어서 vertical-line 값을 middle로 수직 중앙 정렬하게 되면 폰트사이즈나 폰트종류에 관계없이 어긋나지 않았습니다.
혹시나 더 잘아시는 분이 있으시면 추가로 설명부탁드립니다.
1
1
위에 코알못님 말씀대로 vertical-align 사용하니 정상적으로 노출되는데요
폰트 문제인가 싶어 다른 여러 폰트를 사용해봤는데도 vertical-align 없으면 다 어긋나더라구요,,
어떤 문제인지 아시는 분 계시면 설명 부탁드리겠습니다
1
저는 수평이 어긋나지 않는데 혹시 어긋나시면 아래와 같은 방법으로 해보세요.
아래 2가지 방법으로 해도 저는 어긋나지 않거든요. 아마 브라우저 또는 폰트에 따라 그럴 수도 있습니다.
첫번째는 button으로 변경해보세요.
<input type="submit" value="Search">
<button>Search</button>
두번째는 padding으로 만든 높이값을 height로 줘 보세요.
.search input[type=text],
.search input[type=submit] {
height: 50px;
}