배경 이미지 풀스크린 검색창: 글자를 입력했을 때, input 요소끼리 서로 틀어집니다

아직 공부하고 계실지 모르겠지만,  다른분들도 보실 것 같아서 제가 해결한 방법 공유드립니다.
저도 왜 그런지는 자세히 모르겠지만 font-size, font-family 한글/영어에 따라서 어긋나는 정도가 달라 아마도 font 자체가 가지는 matrix 값이 달라서 발생하는 문제로 추측해봤습니다. 관련 내용에 도움되는 참고 사이트 공유 드립니다. https://wit.nts-corp.com/2017/09/25/4903 

결론적으로 , font 마다 가지고 있는 고유의 공간 값이 다른데 입력시 vertical-line이 baseline으로 기본값이 설정되어 있어서 vertical-line 값을 middle로  수직 중앙 정렬하게 되면 폰트사이즈나 폰트종류에 관계없이 어긋나지 않았습니다. 

혹시나 더 잘아시는 분이 있으시면 추가로 설명부탁드립니다.

.search input {

vertical-align: middle;

}

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

위에 코알못님 말씀대로 vertical-align 사용하니 정상적으로 노출되는데요

폰트 문제인가 싶어 다른 여러 폰트를 사용해봤는데도 vertical-align 없으면 다 어긋나더라구요,,
어떤 문제인지 아시는 분 계시면 설명 부탁드리겠습니다

저는 수평이 어긋나지 않는데 혹시 어긋나시면 아래와 같은 방법으로 해보세요.

아래 2가지 방법으로 해도 저는 어긋나지 않거든요. 아마 브라우저 또는 폰트에 따라 그럴 수도 있습니다.

첫번째는 button으로 변경해보세요.

<input type="submit" value="Search">

<button>Search</button>

두번째는 padding으로 만든 높이값을 height로 줘 보세요.

.search input[type=text],

.search input[type=submit] {

    height: 50px;

}