select 박스와 input의 위치가 다를때

기존의 디자인에 맞춰 새로운 페이지를 만들거나, 수정할 때

select box와 input의 위치가 미묘하게 다를 때가 있다.

 

이렇게 selectbox가 올라가 있는경우, 혹은 그 반대의 경우가 보인다.

 

이럴 때

1. 높이를 확인한다.

아무런 css를 주지 않은 input의 경우 padding:1px 0px, border-with: 2px 이고

selectbox의 경우 padding: 0; border-width: 1px;이다.

그러므로 높이가 같은지 확인하는 것이 우선이다.

input의 디폴트 css값

select 의 디폴트 css값

 

 

2. vertical-align을 확인한다.

대부분의 문제는 vertical-align이 달라서 생기는 일이다.

위의 예시도 input 은 vertical-align: middle

select는 vertical-align: top으로 주어 발생한 문제이다.

 

vertical-align을 같은 값으로 주면 해결!!

input[type="text"]{
  line-height: 16px;
  vertical-align: middle;
}
select{
  height: 20px;
  vertical-align: middle;
}