작성한 질문수 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

.search input {

vertical-align: middle;

}

위에 공통 부분 정리하고 vertical-align: middle;넣으니까 저도 해결됐습니다.

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;

}